Create a scrolling anchor link with jQuery

I’ve been meaning to do this tutorial for a while now and it seems as if I’m finally getting around to it!

Very simply put, this will function like a normal internal anchor link or named anchor link, but will scroll to the specified destination instead of merely jumping there. It’s a really easy-to-implement and awesome thing to add to almost any website.

I’m going to jump right into it.

The HTML

All that is needed for this example is an element to click, and an element to scroll to.

<a id="scroll">Click here to scroll</a>
<img src="images/cat.png" alt="cat" />

I’ve decided to scroll to an image of a random cat, however I think this would be most useful for something like a table of contents.

The jQuery/Javascript

We will be using the click() event, animate effect, scrollTop() manipulation and offset manipulation.

// When the Document Object Model is ready
jQuery(document).ready(function(){
	// 'catTopPosition' is the amount of pixels #cat
	// is from the top of the document
	var catTopPosition = jQuery('#cat').offset().top;
	
	// When #scroll is clicked
	jQuery('#scroll').click(function(){
		// Scroll down to 'catTopPosition'
		jQuery('html, body').animate({scrollTop:catTopPosition}, 'slow');
		// Stop the link from acting like a normal anchor link
		return false;
	});
});

Fairly simple and straight forward jQuery.
Note: jQuery('html, body') is necessary for cross-browser compatibility.

What say you?

  1. Shaun says:

    Hi, what about adapting this script to allow multiple elements using the same classes? How would I achieve that? Must the script be repeated over and over or is there a way to make it re-use the same classes over and over?

    1. Jamy Golden says:

      Hey Shaun, I’m currently creating a plugin for this functionality and more. It should be up in about a week or so.

    2. Jamy Golden says:

      In case you or anyone was wondering, this is the anchor link plugin I was referring to.

  2. Preston says:

    Is there a way to set it about 130 px from the top of the browser window. I have it working on my website but its covering my headers up because eI have the nav position: fixed at the top of the window.

  3. christian says:

    Implemented very easily – though it doesn’t work on iPad/iPhone. Is that something I’m doing wrong?

    1. christian says:

      Huh… that’s the same as the one I implemented. Ever had this problem with it before?

  4. Key says:

    Thanks Jamy. Works like a charm. Great PlusAnchor plugin.

  5. Juan says:

    Doesn’t seem to be working on Safari? any suggestions?

    1. Jamy Golden says:

      I’ve just tested in OS X 10.8.3, on Safari 6.0.3 and it works well. What Safari/OS X/IOS version are you using?

  6. Imam Darmady says:

    Thanks for this jquery.

  7. MAtt says:

    What if the link and the cat are inside an iframe, and I want to scroll to the top of the page?

    1. Jamy Golden says:

      Only javascript from within the iframe will affect the iframe. Outside javascript won’t affect it. You could create some js that could mimic scrolling functionality and re-create the effect. But that’s not something that sounds very fun :p

  8. John Gallagher says:

    That’s a lovely little piece of code, love jQuery.

    Thanks Man

  9. vinay says:

    great post, very much useful

  10. Nina says:

    Thanks. Exactly what I needed. Very clean and straight forward. A++

  11. TheClue says:

    It doesn’t work it internet explorer… :(

  12. Corry says:

    Thanks! And also: Cool comment thread design :)

  13. Zool says:

    Hahaha, so funny cat!!

  14. Oli Shilling says:

    Is it possible to make the scroll slower than ‘slow’ ?

    1. Jamy Golden says:

      Yes, you can give it time in milliseconds. Try 2000 instead of ‘slow’.
      2 seconds x 1000 = 2000ms.

  15. Matt says:

    Hi, this works great for me, but I’ve noticed it masks the #id in the url, and I much like this about using anchor links. Is there a function in this code that has disabled this and if there is a way to turn it back on, if that makes sense? thanks :)

    1. Jamy Golden says:

      Yes, remove the return false; line. That should fix the issue. You may find the PlusAnchor plugin I created useful.