You know how when you click on a link to go somewhere else on the current page, and it just zips you there immediately? I’ve always found it to be somewhat disorienting. So, when I recently stumbled upon this excellent script at brandspankingnew, via CSS Beauty, which very smoothly scrolls the page down to the anchor when a link is clicked, I flipped out. It’s definitely one of the cooler scripts I’ve seen in a while, and I can’t imagine a reason to not use it everywhere. Check out the demo page.
However, the author could never get it working in IE because he didn’t have a PC to test it on, and predictably, IE didn’t like it. So in order to use the script on Arena’s public site like I wanted, I’ve utilized my newly developed Javascript-fu and modified it. Take a look at the script here if you like, and use it in your sites. I’ve tested it in IE6 and it works just as well as Firefox. However, there’s still an issue with IE7 where it is scrolling far too slow, and to fix that I need to figure out a way to detect IE7 differently from IE6 in the script. Seems doable.
UPDATE (10/11/06): Thanks to Detecting IE7+ in Javascript from Ajaxian I’ve fixed it to work identically in IE7. Though I still haven’t tested it on a PC :(
UPDATE (05/27/06): I’ve made a new version of the script that now manages anchor links with id targets instead of the name attribute like before. No more non-semantic empty <a> elements, hurray! I’m using it throughout the site here. The old version is still available if your site uses the name attribute. This all seems almost unnecessary considering that practically all JavaScript libraries have this built-in now, but if you’re against using libraries like me, give it a try.
9 Responses to “Smooth Anchor Links”
Nov 20th, 2006
This is an incredibly cool script. I can’t wait to try it out on a site sometime. I will most likely end up using it on my own. Thanks!
Feb 24th, 2007
Dude, way sweet… thanks! Just came across this here site via your comment on shauninman.com. Glad I did:)
Mar 13th, 2007
I’ve got a very slight improvement. In the replaceAnchorLinks function you should wrap a try block around the scrollToAnchor call. This way that if this fails for some reason, the return false will still be fired and the page will not lose it’s functionality.
anchors[i].onclick = function () { try { scrollToAnchor( this.id.substring( 2 ) ); } return false; };
Mar 14th, 2007
Oh yeah, some error catching would definitely be a good idea. Thanks Jason. Any other suggestions are more than welcome! When I get a chance I’ll be making an alternate version soon that uses the id attribute instead of name.
Mar 20th, 2007
Hi Steve,
This is pretty slick functionality.
Can the effect be achieved horizontally?
Mar 21st, 2007
Thanks Ben! Nice idea… I’ve never done a horizontal page layout before, but it seems very possible considering that (after a quick glance at the code) all of the properties/methods used here have horizontal equivalents. If you want to give it a try I’d be interested in seeing how it turns out.
Apr 4th, 2007
I was thinking of doing this for a re-design of my site…
I stumbled on the Gucci site the other week, this is some pretty serious JS to achieve horizontal anchor effect
http://www.gucci.com/uk/catalog/mens/
Intersting stuff, unfortunately my JS skills are pretty basic, so its a question of how much time I can afford to looking into it!
Apr 5th, 2007
@Ben: Cooooooool. I knew it was possible, nice find. Looks like they use Prototype to achieve the effect… I’ve never worked with it myself but it’s probably just a matter of finding the right function to call.
Apr 4th, 2008
This is a really cool idea, but if you have an ID (and possibly a class as well) on the link that initiates the jump (maybe because you are applying CSS styles to the particular link, for instance), lines 57 and 58 of the JS code effectively overwrite your classes and IDs, thereby clearing those styles.
In my case, I was using an image replacement method to give my “top of page” link a custom graphical look. Initializing the script effectively made my link completely disappear.