Scrolling to the Top and Bottom with jQuery

Here’s a way to scroll to the top or bottom of your website with a simple click. I have used the jQuery special scroll events from James Padolsey, and some few extra lines of jQuery. There are two buttons with fixed position on the bottom left of the page, each one with the functionality to move either down or up in the page. If you scroll the page, these two buttons will fade out, which gives a nice and smooth effect.

The jquery code:

$(function() {
	// the element inside of which we want to scroll
        var $elem = $('#content');

        // show the buttons
	$('#nav_up').fadeIn('slow');
	$('#nav_down').fadeIn('slow');  

        // whenever we scroll fade out both buttons
	$(window).bind('scrollstart', function(){
		$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
	});
        // ... and whenever we stop scrolling fade in both buttons
	$(window).bind('scrollstop', function(){
		$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
	});

        // clicking the "down" button will make the page scroll to the $elem's height
	$('#nav_down').click(
		function (e) {
			$('html, body').animate({scrollTop: $elem.height()}, 800);
		}
	);
        // clicking the "up" button will make the page scroll to the top of the page
	$('#nav_up').click(
		function (e) {
			$('html, body').animate({scrollTop: '0px'}, 800);
		}
	);
 });