Random Thoughts on Web Design & Development

Oncemade

Lately I've been seeing lots of websites using animated page scroll, it can be easily done with the help of jQuery. Here is how:

jQuery Code
$('.scrollPage').click(function() {
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
   return false;
});

The code gets the href from the anchor and uses it as the target element. If you want to adjust the scroll speed just change the 500.

Don't forget to checkout the live demo

Demo

Browser Support

  • Firefox
  • Safari
  • Chrome
  • Opera
  • Internet Explore 7 & 8
  • Internet Explore 6
  • Cancel

Comments

leave a comment

  1. Dammit Rodrigo …

    Plugging JQuery features that the average moron could implement is like buying a for Dummies book! :)

    People should have to know what the thing is doing: scrollPos/setInterval etc!

    Baaaaaaaah. JQuery is lame.

  2. Don’t be a hater, Steve. :)
    I agree with you, everyone should learn javascript. I’m trying to learn it; the only reason why I got excited about JS was because of jQuery. I don’t see anything wrong about learning the library and then the core language. Actually, I think it’s been helping be a lot because I already know how powerful the language can be.

    A great example is Ruby on Rails, a lot of people who learned rails without knowing Ruby, and I bet a good percentage of them are as good or better developers than the “true” Ruby devs.

  3. Thanks for the tip Rodrigo, came in very handy. JQuery is awesome. I have to say to Steve that he probably has a little something to learn about programming in general if he’s dissing jQuery in such an offhand way. Javascript is nothing but a specification (actually, it’s ECMAScript). That fact that the browser implements it, and then adds the HTML DOM to it is not part of to the language. So maybe Steve should really purify himself and stop using the features and objects that the browser gives him :) Building and improving on what’s already there is what software is all about. And as you suggest, there are many entry points into learning something new. It’s good to look deeper, but not necessary to get a job done until you want to break out. Keep up the good work.

  4. Hey, thank u for this tip Rodrigo! Very good work!!
    (Ah, você é brasileiro, certo? =P )

  5. Thanks Leandro!
    Eu sou brasileiro sim ;-)

  6. thanks for the code.
    The beauty of JavaScript frameworks is that you can copy, paste and tweak. They are timesavers (a reflection of workplace conditions) and not commentaries on the expertise of those implementing them.

  7. Thanks a lot for this, very useful.

  8. Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:

    http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

  9. Hi Rodrigo thanks for putting this little tutorial together for us. I have a question about how to implement this on my website and if you could give me any advice I’d greatly appreciate it!

    I have a website that doesn’t scroll up and down but sideways instead and I have numerous div’s going to the right of the page and I wanted to be able to scroll to each div to the right (each div is about 300px). So in a nutshell, instead of scrolling to the top of the page once I’d be scrolling to the right of the page multiple times … do you know how I could implement this with your code?

    Thanks Again!

  10. Thanks for your comment Ceaser.

    There is a plugin called scrollto that might be what you’re looking for. http://demos.flesler.com/jquery/scrollTo/

    I hope it helps.
    Rodrigo

  11. Please help me,
    I’m having a problem applying the function. How do you apply it to the href?

    Thanks

  12. This is great – thanks a lot for making it available.

    I’d like to replicate the effect but scroll on page load, rather than when clicking on a link.

    Could you give me any tips on how to tweak the script to achieve that please?

  13. Thanks for the comment Jamie.
    Try the following:

    $(document).ready(function() {
   var destination = $('#ID_of_the_element_to_scroll_to').offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
});

    Here is a simple example with auto scroll. http://examples.oncemade.com/autoScrollJquery.html

    Let me know if it works for you.

  14. Thank you- very useful and easy-to-implement little tool!

  15. This is great – thanks a lot for making it available.

    I’d like to replicate the effect but scroll on page load, rather than when clicking on a link.

    Could you give me any tips on how to tweak the script to achieve that please?

  16. I posted a reply to Jamie explaining how to achieve what you’re trying to do. Take a look
    http://oncemade.com/animated-page-scroll-with-jquery/#comment-4056

  17. lovely, cheers for that mate!

  18. History does not work, please upgrade plugin: http://plugins.jquery.com/project/history

  19. p.s. you just need to remove return false; from code.

  20. Thanks rodrigo, nice little tutorial :)

    greetz from Indonesia

Trackbacks

  1. Graphic Design Links and Tutorials
  2. designfloat.com
  3. Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance « Technosiastic!
  4. Scroll automatico e animato con “scrollTop” e il plugin “easing” jQuery: scroll automatico e animato della pagina con la proprietà scrollTop e il plugin jquery.easing » jblog: news e appunti per webmaster
  5. Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance