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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

cody

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

Stay in the loop: Get your dose of frontend twice a week

πŸ‘Ύ Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

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.