Oncemade » animation http://oncemade.com Design, Web Dev, Inspiration Fri, 09 Jul 2010 02:06:26 +0000 en hourly 1 http://wordpress.org/?v=3.0 Animated Page Scroll with jQuery http://oncemade.com/animated-page-scroll-with-jquery/ http://oncemade.com/animated-page-scroll-with-jquery/#comments Tue, 28 Jul 2009 16:00:34 +0000 Rodrigo http://oncemade.com/?p=613 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
]]> http://oncemade.com/animated-page-scroll-with-jquery/feed/ 25