JavaScript
Article
By Sam Deering

jQuery Smooth Page Links – $.smoothAnchor()

By 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

--ADVERTISEMENT--

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:

 
Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account