Smoothly Scroll to an Element Without a jQuery Plugin

A note from A Beautiful Site’s founder: We developed Surreal to be easy for you and your clients. If you’re a web designer, you should take a look at the simple, hosted CMS that’s changing the way content is managed. Surreal integrates in moments and is trusted by over 18,000 websites. Try it out for free and let us know what you think! Visit Website »

After spending some time looking for a plugin to do this, I was amazed to see how easy it was to get a smooth scrolling effect using one line of jQuery.  You can use this inside of any callback function.  It works especially well with click.

$('html, body').animate({
	scrollTop: $("#elementID").offset().top
}, 2000);

Although LocalScroll is good for more advanced applications, this snippet is useful for one-time use applications.  Simply adjust #elementID and 2000 to set the element and duration, respectively.

If you enjoyed this article, please share it with a friend!

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=""> <strike> <strong>