jQuery Smooth Page Links – $.smoothAnchor()

The jQuery smoothAnchor Function provides you with a lightweight script that can make your in-page anchor links smooth scrolling. There are a few plugins out there which do the same thing but this is my lightweight version and I know it works properly in all the main browsers. So if you after a quick code snippet to smooth scroll to section headings, this 2kb script could be good enough for the job!

Demo

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum ligula vel diam gravida id mollis lacus sagittis. Cras ut felis et mauris fermentum mollis sed vel sapien. Cras accumsan vestibulum est, sed suscipit felis dignissim a. Donec ut turpis neque, at volutpat libero. Nulla facilisi. Nulla scelerisque suscipit neque, id lobortis enim egestas id. Aliquam sit amet libero in augue tempor fermentum. Ut aliquet urna quis risus tempor ut malesuada quam malesuada. Aenean fermentum gravida condimentum. Donec at cursus enim. Sed pretium laoreet congue. Donec accumsan metus et mi pretium condimentum. Nullam a faucibus risus. Quisque condimentum sagittis accumsan. Suspendisse quis lorem nulla.

Vestibulum consequat, tortor in elementum laoreet, odio tellus dictum ipsum, at eleifend lorem purus et dui. Cras commodo libero eget orci ultrices feugiat. Vivamus sed ante sed felis pulvinar volutpat et nec sapien. Aliquam blandit scelerisque augue at commodo. Sed scelerisque augue eget dui condimentum posuere. Phasellus ac mauris diam, a porttitor risus. Maecenas sed consequat dolor. Ut nec urna augue. Duis et felis a nunc ultrices porta. Sed id iaculis mauris. Nulla cursus tellus at ipsum posuere mollis. Vivamus condimentum fringilla malesuada.

back to top

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum ligula vel diam gravida id mollis lacus sagittis. Cras ut felis et mauris fermentum mollis sed vel sapien. Cras accumsan vestibulum est, sed suscipit felis dignissim a. Donec ut turpis neque, at volutpat libero. Nulla facilisi. Nulla scelerisque suscipit neque, id lobortis enim egestas id. Aliquam sit amet libero in augue tempor fermentum. Ut aliquet urna quis risus tempor ut malesuada quam malesuada. Aenean fermentum gravida condimentum. Donec at cursus enim. Sed pretium laoreet congue. Donec accumsan metus et mi pretium condimentum. Nullam a faucibus risus. Quisque condimentum sagittis accumsan. Suspendisse quis lorem nulla.

Vestibulum consequat, tortor in elementum laoreet, odio tellus dictum ipsum, at eleifend lorem purus et dui. Cras commodo libero eget orci ultrices feugiat. Vivamus sed ante sed felis pulvinar volutpat et nec sapien. Aliquam blandit scelerisque augue at commodo. Sed scelerisque augue eget dui condimentum posuere. Phasellus ac mauris diam, a porttitor risus. Maecenas sed consequat dolor. Ut nec urna augue. Duis et felis a nunc ultrices porta. Sed id iaculis mauris. Nulla cursus tellus at ipsum posuere mollis. Vivamus condimentum fringilla malesuada.

back to top

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum ligula vel diam gravida id mollis lacus sagittis. Cras ut felis et mauris fermentum mollis sed vel sapien. Cras accumsan vestibulum est, sed suscipit felis dignissim a. Donec ut turpis neque, at volutpat libero. Nulla facilisi. Nulla scelerisque suscipit neque, id lobortis enim egestas id. Aliquam sit amet libero in augue tempor fermentum. Ut aliquet urna quis risus tempor ut malesuada quam malesuada. Aenean fermentum gravida condimentum. Donec at cursus enim. Sed pretium laoreet congue. Donec accumsan metus et mi pretium condimentum. Nullam a faucibus risus. Quisque condimentum sagittis accumsan. Suspendisse quis lorem nulla.

Vestibulum consequat, tortor in elementum laoreet, odio tellus dictum ipsum, at eleifend lorem purus et dui. Cras commodo libero eget orci ultrices feugiat. Vivamus sed ante sed felis pulvinar volutpat et nec sapien. Aliquam blandit scelerisque augue at commodo. Sed scelerisque augue eget dui condimentum posuere. Phasellus ac mauris diam, a porttitor risus. Maecenas sed consequat dolor. Ut nec urna augue. Duis et felis a nunc ultrices porta. Sed id iaculis mauris. Nulla cursus tellus at ipsum posuere mollis. Vivamus condimentum fringilla malesuada.

back to top

jQuery Function

var JQUERY4U = {}
JQUERY4U.UTIL = {
    /*
    *   Utility function used to make anchor links animate smoothly instead of jumping.
    */
    smoothAnchor: function (anchorClass)
    {
        $('a.'+anchorClass).click(function () {
            elementClick = $(this).attr("href")
            destination = $(elementClick).offset().top;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 1100 );
            return false;
        })
    }
}

<script type="text/javascript">
$(document).ready(function() {
   JQUERY4U.UTIL.smoothAnchor('anchorLink');
});
</script>

As far as I can see it can’t be used as a chaining element as “return this” makes it stutter so I suggest probably leaving it as a standalone function.

Usage

Include the “smoothAnchor” class to any anchor element and then simply reference the id of the element you wish to go to in the href of that anchor.

Anchor Link:

<!-- anchor link -->
<a href="#pagelink-1" class="anchorLink"><em>how much can I borrow?</em></a>

Target Element:

<!-- target element -->
<div id="pagelink-1">

A future improvement could be to make the “back to top” links animate smoothly too, this wouldn’t be too hard to achieve.