jQuery page scrolling

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

				 });

});