jQuery Smooth Page Links – $.smoothAnchor()

Sam Deering

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.

Sam Deering

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.fantastique-arts.com Chris

    I was on my way to do a new version of my site next month and was looking for some nice jquery plugins (e.g. poll, slideshows and others) while I found yours. I didn’t think about this kind of stuff at first but but it’s impressive and clean, so, I’ll use it for sure. Will post back one of the page next time to show the result ;)

  • Pingback: 10 Helpful Lorem Ipsum “Dummy Text/Image” Generators | jQuery4u

  • das

    it working but not smooth …it JUMP

    • http://jquery4u.com/ jQuery4u

      What browser?