jQuery Smooth Page Links – $.smoothAnchor()

Share this article

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;
		})
	}
}

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:

 
how much can I borrow?

Target Element:

 

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

jQuery
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week