Make a "Scroll To Next Article" Button with jQuery: jQuery

If you view my articles page, you will see 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;
}

Css:

#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($){
		
	$('
Next
') 
		.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
				}
			});
		});
	
});

JavaScript:

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!