With “embrace the scroll” taking hold in current design trends, it’s useful to give users a way to easily get back to the top of the page. There are a lot of jQuery plugins available for doing this kind of thing, but I wanted to share a nice way to do this in less than 20 lines of code.

var topLink = $('.top_link');
var showTopLink = 500;
topLink.hide();

$(window).scroll( function(){
	var y = $(window).scrollTop();
	if( y > showTopLink  ) {
		topLink.fadeIn('slow');
	} else {
		topLink.fadeOut('slow');
	}
});

topLink.click( function(e) {
	e.preventDefault();
	$('body').animate( {scrollTop : 0}, 'slow' );
});

The only two things you’ll need to make sure to adjust are the two variables at the top of this snippet. “topLink” is for the link itself, and “showTopLink” should be an integer of how many pixels to scroll before showing the link.