jQuery: Smoothly scroll to internal links

When clicking internal links from a web site, the page ‘jumped’ to the position. Sometimes visitors can be confused – is it still the same or different page?

Most modern websites now scrolls smoothly to the position with use of jQuery. I found a smooth scroll plugin that only requires minimal code to achieve the effect. Great if you don’t know much about jQuery.

Simply download the fileĀ jquery.smooth-scroll.min.js and add code to <head> section:

<script type="text/javascript" src="jquery.smooth-scroll.min.js"></script>

Just prior to </body>, add

<script type="text/javascript>
$('a').smoothScroll();
</script>

This applies too all <a> tags in the document. For specific <a>, eg those enclosed in the menu defined with id=”menu”,

$('#menu a').smoothScroll()

Leave a Reply

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