Scroll to start of new page

[bobbingwide]

After the user has clicked on a link it would be nice if they returned to the start of the new page.

Proposed solution

This can be achieved using the following JavaScript

    $('html, body').animate( { scrollTop: $parent.offset().top }, 500 );

where $parent is the div.ajax-shortcode that's just been updated with the new content.

[bobbingwide]

We also need to ensure that the current content is replaced.

[bobbingwide]

When the WordPress admin menu is visible the scrolling back to the top goes too far with the s to e of n being hidden under the admin menu.

[bobbingwide]

Temporary fix for scrolling is to subtract the height of the admin bar, 32 pixels for desktop. Better solution is to determine the height of the control with #wpadminbar ID.

[bobbingwide]

We should also cater for themes which place their own menu over the top of the page. e.g. <header id=masthead ... on the Twenty Fourteen theme. And it looks like we need to cater for both #wpadmin and #masthead in this case.

[bobbingwide]

The QAD solution for this is to implement getting the admin_bar_height as a short function.

  /**
   * Take the top bar height into account
   *
   * For the WordPress admin bar we just need the height
   * For the TwentyFourteen theme we need to add the #wpadminbar height as well
   * TwentyFourteen's CSS allows for it by setting top: 32 in certain situations
   */
  var barheight = function() {
    admin_bar = $( '#wpadminbar, #masthead' );
    if ( admin_bar.length ) {
      admin_bar_height = admin_bar.height();
      admin_bar_height += admin_bar.prop( "offsetTop" );
    } else {
      admin_bar_height = 0;
    }
    return( admin_bar_height );
  }

I'm not a jQuery expert but it seems to work because the #masthead selector is the first entry returned in the admin_bar results.