Advanced Search

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