Ask your WordPress questions! Pay money and get answers fast! (more info)

Next and Previous Links without the page "jump" WordPress

  • SOLVED

I have next/previous links at the bottom in my single file that you can navigate to newer/older post in that category. But I dont want the page to "Jump up" every time I click the prew/next link. Any simple solution to prevent this happening?

Screenshot, http://awesomescreenshot.com/0b72djnq30

Url to test page, http://planeta.se/bullerWebb/nyheter/nattrea/

<div id="nav-above" class="navigation">
<div class="nav-previous"><?php previous_post_link('&laquo; %link', 'Prew', TRUE); ?></div>
<div class="nav-next"><?php next_post_link('%link &raquo; ', 'Next', TRUE); ?></div>
</div><!-- #nav-above -->

Answers (5)

2014-02-19

Bob answers:

May be some javascript helps.
go to footer.php of you theme
and add code right before <em></body></em> tag

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#nav-above a").each(function(){
var post_link = jQuery(this).attr("href");
post_link = post_link +"#nav-above";
jQuery(this).attr("href",post_link);
});
}); // end ready function
</script>

What above code does is It adds #nav-above in navigation link at the end.
so when user will go to next page he will be automatically scrolled down at bottom


Bob comments:

you can also ad above code in footer by writing following code in your theme's functions.php file


<?php
function add_id_in_navigation() {
?>

<script type="text/javascript">

jQuery(document).ready(function(){

jQuery("#nav-above a").each(function(){

var post_link = jQuery(this).attr("href");

post_link = post_link +"#nav-above";

jQuery(this).attr("href",post_link);

});

}); // end ready function

</script>
<?php
}
add_action('wp_footer', 'add_id_in_navigation', 100);
?>


Alfonso Regatta comments:

Yeah great stuff! thanks alot!

2014-02-19

Arnav Joy answers:

do you want to remove it ?


Alfonso Regatta comments:

No, I want to keep the "navigation-below" but I dont like when the page "jump" when I click the .nav-previous and .nav-next

2014-02-19

Ryan S answers:

Hi try this, add this in your current theme functions.php

add_filter( 'the_content_more_link', 'remove_more_jump_link' ); // remove more-link jumper

/**
* @desc remove readmore jump
*/
function remove_more_jump_link( $link )
{
$offset = strpos( $link, '#more-' );

if( $offset )
$end = strpos( $link, '"', $offset );

if( $end )
$link = substr_replace( $link, '', $offset, $end-$offset );

return $link;
}


Hope that helps


Alfonso Regatta comments:

Thanx! :) but I donĀ“t work..

2014-02-19

Balanean Corneliu answers:

He want the page to remain scrolled down after he click next.


Alfonso Regatta comments:

Yes! Exactly!

2014-02-19

Firoja_Imtosupport answers:

Hi,

I think, you should use ajax pagination if you don't want the page to jump(reload) on navigation.


Firoja_Imtosupport comments:

Hi,

You can see for below urls for ajax pagination.

http://wpcanyon.com/tipsandtricks/the-easy-way-to-make-wordpress-ajax-pagination-using-jquery/
http://www.wpmods.com/easily-ajax-wordpress-pagination/
http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/
http://www.mygeekpal.com/creating-an-ajax-powered-pagination-in-wordpress/


Alfonso Regatta comments:

HI! I tried this one and it still jump(reload) to top.

jQuery(document).ready(function(){
// ajax pagination
jQuery('.navBottom a').live('click', function(){ // if not using wp-page-numbers, change this to correct ID
var link = jQuery(this).attr('href');
// #main is the ID of the outer div wrapping your posts
jQuery('.prodWrapper1').html('');
// #entries is the ID of the inner div wrapping your posts
jQuery('.prodWrapper1').load(link+' #entries')
});
}); // end ready function


Firoja_Imtosupport comments:

Hi,

If you want to keep page scrolled down after you click next or previous link, you will have to pass #nav-above in wp-includes/link-template.php (in function get_previous_posts_link and get_next_posts_link)

Example:<a rel="next" href="http://planeta.se/bullerWebb/nyheter/valkommen-till-var-nya-hemsida/#nav-above">Next</a>

check by pasting http://planeta.se/bullerWebb/nyheter/valkommen-till-var-nya-hemsida/#nav-above in browser

Hope this will help you.


Alfonso Regatta comments:

Sorry.. I dont get what you mean about how to pass #nav-above in wp-includes/link-template.php

What shuld I put in wp-includes/link-template.php?

Sorry about that..


Firoja_Imtosupport comments:

Hi Alfonso,

Please can you give me your skype Id so i can help you how to add #nav-above in file.