jquery

Animated scroll to anchor method with jQuery

By On March 30, 2012 · 2 Comments

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:

scrollToAnchor("your-anchor-id");

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.

http://jqueryui.com/download

or you can just use this version

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
function scrollToAnchorWithEffect(id, duration){
	$('html,body').animate({scrollTop: $("#"+id).offset().top}, 'slow', function(){
		if($.ui.version){
			$("#"+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

  1. Spring Zhang says:
    October 21, 2012 at 1:58 am

    funny script

  2. Faisal Safadi says:
    April 28, 2013 at 12:07 am

    coool, tanks

Leave a Reply