Smooth anchor scrolling Javascript

17 February 2006   19 comments   Web development

Powered by Fusion×

Thanks to Seb Bacon's suggestion I've today looked at enabling smooth scrolling in Javascript for when you click on anchor links. See the result here if you're impatient

That page has a TOC at the top and several "top" links further down. If everything works as expected you'll see that the page scrolls very smoothly when you click on one of the anchor links. I think this is a lovely use of Javascript since it's 100% unobtrusive. If Javascript isn't enabled there's no harm done but if it works you get a much better experience. The smooth scrolling gives you a much better idea of where you are in the page when moving from one anchor to another.

I got the script from Soxiam Wiki but had to modify it to also scroll to div tags with id's that match.

The only disadvantage with this is the additional download of the script on 5Kb but I can optimize that down to 2.2Kb with slimmer


It doesn't work at all in Safari (1.2.4 here), and it breaks functionality badly. When clicking on one of the anchor links in Safari it opens another window with the same URL (and it doesn't even move to the desired anchor location on the page). In my humble experience, JavaScript is rarely able to fail without failing hard...
Peter Bengtsson
Oops. I'll look into it.
With Safari it smooth scrolls to the bottom of the page and then jumps to whatever link you clicked on
It works flawlessly for me in Safari. It could be that a new version has come out since then. Nice script! Thanks~
Mad Neville
Using Safari 2.0.4, I find it works, but using it on a link to a "top" anchor causes the "loading" indicator icon on the tab to keep spinning forever, which is offputting because you think that the page hasn't loaded or something. (That's not on your design but on mine, which has a weird asssortment of divs, so on a 'plainer' page it works) - shame. Otherwise, nice!
I can't get it to work at all on this page
Shane Lambert
I was able to get this code to work for moving DOWN a page, but in Mozilla and IE6, it just pops back when it goes UP a page. Am I missing something?
Is there a way to invoke scrolling by a JavaScript call instead of a click on the link?
you can also use the Effect.ScrollTo method of the Scriptalicious api, using regular anchor links for the href and the javascript scroll method for the onclick attribute etc.. Couldn't believe how easy it was to implement, and worked like a treat for me. Again probably requires a significant download size, but ways of decreasing it and not so relevent when everyone's getting much faster download speeds nowadays.
example a tag attributes:
onclick="new Effect.ScrollTo('elementId'); return false;"
..where is the link to download the .js file?
where is the link to download the .js file?
This is great! is there anyway to modify this so that if you've arrived at the page via google the javascript will scroll automatically to the search terms?
umm, finally found the link to the .js url. really cool stuff; you should make the code easier to find!
Phil Wilks
If you want a smoother scroll that slows down as it approaches the destination, you can change line 119 to something like this...

window.scrollTo(0, parseInt(wascypos + (dest-wascypos)/10 + 4));

This ignores the ss.STEPS setting and hard codes the values, but it could be adapted. The "10" controls the speed (higher is slower) and the "4" is in there so that the animation doesn't slow down too much as it approaches the destination.
The page back icon does not work too good with this script does it? (if any of the "top" links are clicked, the page back icon needs to be clicked minimum of two times)
Hi there!
Nice script!

So i've a fixed menu on top of the page, and i need to fix the scrolling to 150px from the top of the page.

How can i do it?

Forgive me for my english..
could you make this scroll horizontally by any chance?
awesome man! thanks for sharing.

Your email will never ever be published

Related posts

Angry arabs 16 February 2006
waiting for your guidance 19 February 2006
Related by keywords:
Optimize with 15 February 2005
XHTML, HTML and CSS compressor 07 April 2004
Comparing YUI Compressor and slimmer 17 November 2009
slim, a new free web service for white space optimisation 25 July 2006
Private functions in Javascript? 29 April 2006
Slimmer with --hardcore 06 May 2006