Smooth scrolling to #anchor

Supplemental 177 views
+1
0 Flares 0 Flares ×

For a smooth scrolling animation towards a #anchor, such as a button at the bottom to scroll to the top or a table of contents, this snippet does the job:

$(document).ready(function() {

	$("a.topLink").click(function() {
		$("html, body").animate({
			scrollTop: $($(this).attr("href")).offset().top + "px"
		}, {
			duration: 500,
			easing: "swing"
		});
		return false;
	});

});

HTML

<h1 id="anchor">Lorem Ipsum</h1>
<p><a href="#anchor" class="topLink">Back to Top</a></p>

For Reference:

Useful jQuery Code Snippets

Provided by: Cats who Code
Tagged with:
Posted in jQuery

Discuss:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×