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

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

you can change effect from slow to normal or fast or even a int in milliseconds.

from your code call it as:


Great, now as simple scroller works, lets add some effects.
In order to use .effect plugin you would have to include jQuery UI library into your web page.

or you can just use this version

<script src="" type="text/javascript"></script>
function scrollToAnchorWithEffect(id, duration){
	$('html,body').animate({scrollTop: $("#"+id).offset().top}, 'slow', function(){
			$("#"+id).effect("highlight", {'color': '#ff0000'}, duration);

from your code call it as, where 2000 is an duration of the effect in milliseconds:

scrollToAnchorWithEffect("your-anchor-id", 2000);

Happy coding!

Dima Svirid

Software architect. Ajax/Javascript, HTML5, Android, iPhone/iPad, JAVA, PHP, Cold Fusion, SQL, Air, Flash, Open source software, Frameworks

More Posts

Follow Me:

Tagged with:

2 Responses to Animated scroll to anchor method with jQuery

Leave a Reply