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('« %link', 'Prew', TRUE); ?></div>
<div class="nav-next"><?php next_post_link('%link » ', 'Next', TRUE); ?></div>
</div><!-- #nav-above -->
Answers (5)
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!
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
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..
Balanean Corneliu answers:
He want the page to remain scrolled down after he click next.
Alfonso Regatta comments:
Yes! Exactly!
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.