jQuery: Smooth Page Scrolling & Smooth Page Jumps

Have you ever seen that nice effect on a website where you click a link to return to the top of the page and it slides gracefully back to the top?

Here’s how you do it:

//jQuery Smooth Page Scrolling
$(function() {

	$('a.scrollToTop, a[href=#top]').click(function(){

		$('html,body').animate({scrollTop:0}, 1500);

		return false;

	})
});

Demo

Anything with a class of scrollToTop or a named anchor of #top will glide the user back to the top of the page.

What happens though if you want to transition all page jumps? Well we could find all the named anchors on the page, and then find the anchors that relate to them and bind a click event to them like this:

//jQuery Smooth Page Jumps
$(function() {

	var theDestinations = $('a[name]');

	theDestinations.each(function(i){

		var	thisDestination =  $(this),
			thisDestinationOffset = thisDestination.offset(),
			thisLink = $("a[href=#" + thisDestination.attr("name") + "]");

		if(thisLink.length > 0) {
			thisLink.click(function(){

				$('html,body').animate({scrollTop : thisDestinationOffset.top}, 1500);
				return false;

			});
		}
	});
});

Demo

Let’s break it down a bit:

var theDestinations = $('a[name]');

Find all the named anchors on the page and set it to a variable called theDestinations.

theDestinations.each(function(i){

Loop through theDestinations variable as many times as there are named anchors on the page.

var	thisDestination =  $(this),
	thisDestinationOffset = thisDestination.offset(),
	thisLink = $("a[href=#" + thisDestination.attr("name") + "]");

Set up the variables so we can reference them again without jQuery having to work harder than it needs to.

  • thisDestination is set to $(this) which is the anchor we are currently looking at in the loop.
  • thisDestinationOffset creates an offset object which will give us the named anchors top and left values from the top of the page so we know where to scroll to.
  • thisLink will be the link that a user would click to travel to the named anchors position. We work out its name based on theDestination’s name attribute.
if(thisLink.length > 0) {

Here we check to ensure that thisLink actually exists before we proceed.

thisLink.click(function(){

Next we setup the click event which will initiate the page jump.

$('html,body').animate({scrollTop : thisDestinationOffset.top}, 1500);

This is the magic. We animate the HTML and BODY elements to move the distance we defined with thisDestinationOffset over a 1.5 second time period. We have to animate both HTML and BODY so that the animation works in all browsers. Chrome will not animate the HTML element.

return false;

Returning false simply prevents the browser carrying out its default behaviour which in this case would drop us down to the named anchor without the animation.

One thought on “jQuery: Smooth Page Scrolling & Smooth Page Jumps

  1. Hi,
    I am a newbie and reading your page regarding smooth scrolling.
    On my page i currently have a jquery and smooth scroll but i need to add another smooth scroll but not sure how to go about it.
    If you select accessories then Audi upon selecting Audi i now need the scroll to scroll to the item selection.
    Any advice is welcome many thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *