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.
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?
Hey Shaun, I’m currently creating a plugin for this functionality and more. It should be up in about a week or so.
In case you or anyone was wondering, this is the anchor link plugin I was referring to.
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.
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
Implemented very easily – though it doesn’t work on iPad/iPhone. Is that something I’m doing wrong?
Try this plugin: http://github.com/JamyGolden/PlusAnchor
Huh… that’s the same as the one I implemented. Ever had this problem with it before?
Thanks Jamy. Works like a charm. Great PlusAnchor plugin.
Doesn’t seem to be working on Safari? any suggestions?
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?
Thanks for this jquery.
What if the link and the cat are inside an iframe, and I want to scroll to the top of the page?
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
That’s a lovely little piece of code, love jQuery.
Thanks Man
great post, very much useful
Thanks. Exactly what I needed. Very clean and straight forward. A++
It doesn’t work it internet explorer… 🙁
Thanks! And also: Cool comment thread design 🙂
Hahaha, so funny cat!!
Is it possible to make the scroll slower than ‘slow’ ?
Yes, you can give it time in milliseconds. Try 2000 instead of ‘slow’.
2 seconds x 1000 = 2000ms.
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 🙂
Yes, remove the
return false;line. That should fix the issue. You may find the PlusAnchor plugin I created useful.Hi, thank you for your feedback. I am using the PlusAnchor plugin you created/recommend and I’m having the problems on that. How with Plus anchor can I get the #id to appear in the url bar? Thanks 🙂