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 […]

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);
		}
	);
 });

Tagged with:

cody

Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 20

Comments are closed.
  1. Pingback: uberVU - social comments

    • With href you “jump” to a position. With this effect you let the user see where he is moving because you scroll the page.

  2. Owh.. im sorry.. i have been to try.. but this effect is scrolling up only.. can’t scroll down.. why this ?

    Thanks for your tutorial

  3. “Owh.. im sorry.. i have been to try.. but this effect is scrolling up only.. ”

    you have a spelling error in the ID or Name of the HREF! 🙂

  4. Owh.. im sorry.. i have been to try.. but this effect is scrolling up only.. canâ??t scroll down.. why this ?

    Thanks for your tutorial

  5. Just downloaded the Chrome version from the gallery. I see the potential of your scroller, but could you please slow it waaay down so it’s smooth and readable? Otherwise it serves no real purpose.

  6. Owh.. im sorry.. i have been to try.. but this effect is scrolling up only.. ”

    you have a spelling error in the ID or Name of the HREF! 🙂

  7. i f you switch “$(‘html, body’)”
    to “$(‘html’)” it will be working with Opera

  8. The animated scrollTop() does not work in FF even if it is used for window, document, body or html.

    Using the latest jQuery 1.6.1 library.

    Any suggestion?

  9. Great tutorial! I am putting this scroll technique in my Blog 🙂

    @Danny it works fine fore me.

  10. Hey! This is really the effect I was looking for, but I’m having difficulties implementing this to “multiple elements”.

    I have a column which contains images and text, and I’d like to make it scroll everytime anything in that column is clicked. Is that simple?

  11. Can you please point me to a Javascript that can scroll to a name anchor tag by click of a link? Thanks.