Animated scroll to anchor/id function with jQuery

2009
10.07

Today I had to make a function for a client of mine so I decided to share it with you.

It’s a oneliner but can add a really nice effect to your website.

This function needs jQuery

function goToByScroll(id){
     	$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

Of course you can change slow to normal or fast or even a int in milliseconds.

And to call it

<script>
goToByScroll("theIdIWantToGoTo");
</script>

Enjoy

Nicholas Reed said: 2009.11.09 12:36

This code saved me, I’ll send you a link to the site I’m working on when its finished.
Christophe Verbinnen said: 2009.11.09 13:21

Glad to hear this ! Good luck
Jamie said: 2009.11.09 17:05

ABSOLUTELY BRILLIANT!! I have been looking for this for a long time!! Thank you soooo much!!
mehdi karamnejad said: 2009.11.14 13:03

always share the code you write for your clients!
JS said: 2009.11.20 18:55

thanks! at least i can understand this tutorial
kazes said: 2009.12.23 16:02

thanks.
I avoid installing “scrollTo” jQuery plugin (which is good but too much for what I needed =)
lvp said: 2010.02.03 00:50

im so new with this…. where should i put this code? within the head tag?
OMTC said: 2010.02.04 19:48

Works perfect!!!!!!!!!!! Thanx so much!!!!!!!!!