Create a scrolling anchor link with jQuery

30 Nov

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?

Shaun says:

11 Feb2011

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?

Jamy Golden says:

12 Feb2011

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

24 Aug2011

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

Preston says:

10 Apr2012

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.

Jared Kozak says:

24 Jan2013

Yessir,
take a look at this post.
http://stackoverflow.com/questions/13036142/anchor-links-to-start-below-the-header-which-is-fixed-at-the-top

christian says:

04 Oct2012

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

Jamy Golden says:

11 Oct2012

Try this plugin: http://github.com/JamyGolden/PlusAnchor
christian says:

22 Oct2012

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

Key says:

14 Feb2013

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

Juan says:

13 Mar2013

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

Jamy Golden says:

02 Apr2013

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?

Imam Darmady says:

19 Mar2013

Thanks for this jquery.

MAtt says:

07 May2013

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

Jamy Golden says:

13 May2013

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