Return to Snippet

Revision: 39144
at January 14, 2011 01:45 by BFTrick


Initial Code
$(document).ready(function(){
	$(".scroll").click(function(event){
		//prevent the default action for the click event
		event.preventDefault();

		//get the full url - like mysitecom/index.htm#home
		var full_url = this.href;

		//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
		var parts = full_url.split("#");
		var trgt = parts[1];

		//get the top offset of the target anchor
		var target_offset = $("#"+trgt).offset();
		var target_top = target_offset.top;

		//goto that anchor by setting the body scroll top to anchor top
		$('html, body').animate({scrollTop:target_top}, 2000, 'easeOutQuad');
	});
});

Initial URL


Initial Description
You will want to include the jquery easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/

Add a class of 'scroll' to any element that should slide to an anchor tag. You must give the anchor tag an id equal to the name.

Initial Title
Jquery Scroll to anchor tag on page

Initial Tags
jquery

Initial Language
jQuery