Make a "Scroll To Next Article" Button with jQuery
If you saw my old articles page, you would have seen a, “next” button on the bottom left of the browser window that looks like this: 
Click the arrow, and it will take you to the next article on the page.
To create this, first lets setup the CSS. The key in here is the position: fixed; bottom: 2%; left: 2%; statement. This pins the arrow to the bottom left of the browser window.Since position fixed doesn’t work in IE6, I just hide the div with the * html hack – I know I’m bad ;) Since Apple dropped support for IE6, I might as well for the advanced features.
#next_arrow {
width: 50px; padding-top: 50px;
background: url(../img/structure/backgrounds/next_arrow.gif) no-repeat top left;
text-align: center; position: fixed; bottom: 2%; left: 2%; z-index: 999;
}
* html #next_arrow { display: none; }
#next_arrow:hover { cursor: pointer; }
Using the scrollTo plugin, this is a fairly straight forward task to make the window scroll to the next article. Here is the code I am using:
jQuery(function($){
$(‘<div id="next_arrow">Next</div>’)
.prependTo("body") //append the Next arrow div to the bottom of the document
.click(function(){
scrollTop = $(window).scrollTop();
$(‘#content h2’).each(function(i, h2){ // loop through article headings
h2top = $(h2).offset().top; // get article heading top
if (scrollTop<h2top) { // compare if document is below heading
$.scrollTo(h2, 800); // scroll to in .8 of a second
return false; // exit function
}
});
});
});
If you read my comments in the code, you should be able to know what’s going on here. The only thing you have to worry about is changing the selector #content h2 to your article heading selector.
That’s it, now you have a skip to next article button!
Like this article? You'll like my NEW training website for front-end web developers!
Video workshops on jQuery, JavaScript, HTML5, web performance and more.
Upgrade your front-end developer skills!
21 comments
Pretty nice. Treehugger.com has similar functionality, they just use anchor links though. One thing you might consider is adding in functionality that if the user is at the last article on the page, clicking the arrow takes them to the next page of articles.
Nice script that works just as advertised! But doesn’t prependTo() add to the beginning of the element rather than adding to the end (appendTo())?
.prependTo("body")does attach the button div to the beginning of the document, but it doesn’t matter because the CSS rule I use:position: fixed; bottom: 2%; left: 2%;makes it display on the bottom-left of the page regardless.Perhaps you could provide a non-javascript fallback by having an arrow next to each heading that hash(#) linked to the id of the next heading. The javascript enhancement would remove those and use the fixed arrow. Overly complex? Just thinkin’ that’s all.
J A R: Good idea, I thought of something similar but I guess my goal here was to add a simple JavaScript enhancement to my website that anyone can use for themselves.
Shouldn’t this:
scrollTop = $(window).scrollTop();be this?
<strong>var</strong> scrollTop = $(window).scrollTop();Just my 2 cents ;-)
Scriptov: I guess “technically” you are right, but I don’t see why it matters.
Thanks! I’ve been looking for a good implementation of this for loong time.
So thanks, works great!
but one question..,
how would you reverse it? so you get a prev button on the right side..?
Try this… first add the reverse plugin to reverse the headings:
Then switch the less than sign to the greater than sign in the each.
Thanks Marc, Works perfectly!
see it in action here, http://pandl.org/wp/
Nice! I like the hot-key as well.
Thanks a lot for the code, this was right what i was looking for.
I’m using it on my website now (it’s not completely done yet, but I’m getting to it)
http://www.nephilistic.com/
So, now for a little bit more tricky..,
how would you get a next-article button if it’s not a vertical scroll.. but a horizontal scroll..?
so i imagine you could use the offset().left instead of top, but you’d still need to horizontally align the content to the middle, which would be possible with an offset based on browser window..?
Any ideas?
How do you make the prev not appear at the top?
I want to have the up dissapear when at the top and down when at the bottom..
Thanks
Mike
This script is exactly what I am looking for on a current project, however we are loading the 1.3.2 JQuery library. Any chance you could help with an update that is compliant with the current release?
Is there way to make the header scroll to, for example, 200px from the top of the window?
I would be so glad if someone know how to answer to the previous question : how to change the target of the scroll (not to the top of the page but to the top of a div, or 300px from the top, for instance)
Thank you in advance
best
seb
Like Jonas, I’m trying to get this to work on a website with horizontal scrolling. Do you know what elements you would change in order to scroll to the left side of each article instead of the top?
Thanks much,
jP
Thanks for this, super!
wonderful works. thanks!