Use your left/right keys to browse tutorials
jQuery page scrolling

jQuery page scrolling

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on June 4, 2010

Over a year ago I wrote an article on scrolling a page using Prototype, just to update things here I’m going to run through scrolling a page using jQuery and the animate() function. Automated page scrolling is useful in many cases. A good example of this technique can be found in the personal project i worked on a few months back ‘We Deliver’ which you can find here. The page scroll in this project was particularly important as it’s a single page site in that all the content and animation happens within a single user experience.

The Code

It’s extremely easy to get started using jQuery scroll. First we need to declare the element that the vertical scrollbar uses as it’s reference so in other words we want to scroll the main html body window for example.

$('html, body').animate({

The next line is saying scroll to the element defined (in this case the element .bottom) we’re not defining an offset so it takes the top of the element.

scrollTop: $(".bottom").offset().top

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.


$("document").ready(function() {

				$('.top-title').click(function(){

					$('html, body').animate({
						scrollTop: $(".middle").offset().top
					}, 2000);

				 });

				$('.middle-title').click(function(){

					$('html, body').animate({
						scrollTop: $(".bottom").offset().top
					}, 2000);

				 });

					$('.bottom-title').click(function(){

					$('html, body').animate({
						scrollTop: $(".top").offset().top
					}, 2000);

				 });

});



More tutorials from Papermashup
Comments
37 discussions around jQuery page scrolling
Older Comments
  1. Thanks for sharing the code and demo
    good luck

  2. Pingback: Great jQuery Plugins for Fresh Websites | Web Design Library

  3. jquery guide says:

    its very useful codes, i will update in future.

Older Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.