how to prevent browser from scrolling to the top of the page on post navigation?

  • good evening,

    i’m working on a WP that uses Pages as the primary delivery for content.

    in summary : whenever a link is clicked to navigate to the next Post, the browser window scrolls back to the very top of the Page. i want the Post content to update, not the entire page to refresh… but i can’t find anyone else with the same problem, so i assume it’s a fundamental mistake i’m making.

    my page.php has several references to the Loop, using :

    <?php rewind_posts();?>

  <?php query_posts('showposts=1&category_name='.$slug.'&post_type=post&order=ASC');?>

  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

--CONTENT--

<?php endwhile; else: ?>
  <p>Sorry, there are no posts to display</p>
<?php endif; ?>

    the Page is in three sections, each with a reference as posted above.

    First to pull the Featured Image from the Page and display it as a background image. Second to generate an index of all Posts with the same Category as the name of the Page. Third to display the first Post of the correct Category, and allow for Post Navigation of all Posts within that category.

    the third section is giving me problems.

    when i click the

    <?php next_post_link( ‘%link’, ‘Next post in category’, TRUE ); ?>

    link on the third section, it loads the next Post… but the entire browser window scrolls back to the top. then i have to scroll back down to the bottom to view the newly loaded Post.

    how do i prevent this scrolling???

    thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It sounds like normal browser behaviour, is there a reason why the browser wouldn’t do this? I.e., do you have some code to prevent the browser from resetting the viewport and it’s not working?

    Thread Starter jasonjasonjason

    (@jasonjasonjason)

    @andrew,

    i have nothing to change any standard browser behavoir. but i seem to rememeber on WP’s i’ve seen elsewhere, that clicking “next” / “previous” nav icons would leave the main body of the Page alone, and only refresh the content?

    it’s possible i’m remembering in correctly…

    maybe the annoying need to scroll up and down is less noticible with pagination of 5 or 6 Posts at a time, VS single Post on a page.

    the closest i’ve seen to anyone referencing a problem similar to mine was suggestions to set different “anchors” for the scrolling points on a page, but that was related to a navigation Plugin.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Maybe you were previously using a theme or plugin that utilised AJAX to handle the next/ prev buttons? Are you happy to use anchors to resolve this?

    Thread Starter jasonjasonjason

    (@jasonjasonjason)

    @andrew,

    on checking with my old page, i have the first 15 Posts load on the index. so Navigation wouldn’t work very well without having the viewport reset to the top of the page ??

    so i suspect it’s just a case of my being ignorant to the normal function of WP Post navigation.

    Are you happy to use anchors to resolve this?

    i would most prefer to avoid using a Plugin to do this, so if Anchors are something i can code into the page.php (for example) to preserve the viewport “location” on Post navigation… that would be great.

    my pages will all have the Posts at the bottom, so preventing the scrolling to the top will kind of make-or-break my whole idea ??

    thanks!

    Thread Starter jasonjasonjason

    (@jasonjasonjason)

    @andrew,

    i just checked my old WP – and the index was 15 Posts long per Pagination. so the viewport returning to the top was actually essential to it working ?? i’ll chalk this problem up to me not being familiar to how WP normally functions.

    my Pages will never (famous last words) have more than three Posts displayed at a time. so being able to set the point where the Viewport scrolls up to, would be fantastic.

    i would prefer to avoid using a Plugin as they usually add another step to entering content. are Anchors something you code into the .php files themselves?

    thanks!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m actually not sure about how to add anchors in PHP, but another way you could do it is through JS. Are you okay with installing a ‘Custom JS’ plugin so that you can add the JS code we recommend?

    Thread Starter jasonjasonjason

    (@jasonjasonjason)

    @andrew,

    i would prefer to avoid JS if possible. do you think this could be better accomplished by finding a Plugin that is designed to facilitate Post Navigation on Pages?

    or is this kind of a fundamental issue with how WP navigates? and no way to avoid JS?

    is the JS you’re referring to AJAX? i found a lot of people asking scrolling questions about AJAX.

    Thanks!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    No worries, it might be better finding a plugin that does this kind of stuff. Oh no I was thinking of using JavaScript to apply the anchor points to the previous/ next buttons

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘how to prevent browser from scrolling to the top of the page on post navigation?’ is closed to new replies.