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

betabug - 19 February 2006 [«« Reply to this]
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 - 19 February 2006 [«« Reply to this]
Oops. I'll look into it.
Ben - 25 February 2006 [«« Reply to this]
With Safari it smooth scrolls to the bottom of the page and then jumps to whatever link you clicked on
Josh - 23 July 2006 [«« Reply to this]
It works flawlessly for me in Safari. It could be that a new version has come out since then. Nice script! Thanks~
Mad Neville - 01 December 2006 [«« Reply to this]
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!
John - 12 January 2007 [«« Reply to this]
I can't get it to work at all on this page http://www.johnnlaura.com/kbrooks/dotcom/index.html
Shane Lambert - 15 March 2007 [«« Reply to this]
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?
Marcus - 19 March 2007 [«« Reply to this]
Is there a way to invoke scrolling by a JavaScript call instead of a click on the link?
Eddie - 28 March 2007 [«« Reply to this]
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:
href="#anchorRef"
onclick="new Effect.ScrollTo('elementId'); return false;"
Ebe - 04 August 2007 [«« Reply to this]
..where is the link to download the .js file?
Lassar - 28 May 2011 [«« Reply to this]
where is the link to download the .js file?
Gil - 31 August 2007 [«« Reply to this]
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?
Ben - 09 January 2008 [«« Reply to this]
umm, finally found the link to the .js url. really cool stuff; you should make the code easier to find!
http://www.issuetrackerproduct.com/About/smoothscrolling.js
Phil Wilks - 08 May 2008 [«« Reply to this]
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.
Miki - 04 November 2009 [«« Reply to this]
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)
RamoĆ³n - 13 February 2010 [«« Reply to this]
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..
Anonymous - 21 February 2010 [«« Reply to this]
could you make this scroll horizontally by any chance?
Anonymous - 21 July 2010 [«« Reply to this]
awesome man! thanks for sharing.


Your email will never ever be published