Daily Archives: July 6, 2010

Smoothly scroll to anchor links with LocalScroll

This is another one of the great finds I made while designing my portfolio website. Because of its nature, all of the content for this website fits on a single (yet long) page. This page is accompanied by a navigation section on the side containing links to anchors on the page. I wanted a sexy effect when a user clicked on one of the aforementioned links, and finally went with a nice scrolling effect.

Instead of writing this myself, I opted for the free jQuery plugin called LocalScroll, which was skillfully created by Ariel Flesler. This script is very, very simple to implement but adds a high degree of cachet to your page. It’s certainly a nice touch to vanity sites like portfolios or resumes.

Download the plugin here. To make this work, you will need a recent version of jQuery running on your page and another plugin by Ariel Flesler called ScrollTo (LocalScroll is based on ScrollTo and requires it to function correctly).

An example HTML header:

<head>
	<meta charset=utf-8 />
	<title>Scrolling Page</title>
	<script src="lib/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/jquery.scrollTo-min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/jquery.localscroll-min.js" type="text/javascript" charset="utf-8"></script>
</head>

Now all you need to do is create some anchor links and link to them. To make the smooth scrolling work, you need to write a bit of JavaScript.

<h2><a name="resume">Resume</a></h2>
<h2><a name="portfolio">Portfolio</a></h2>

Your document ready function should look something like this:

$(function() {
	$.localScroll({
		stop: true
	});
});

And.. That’s it. Refer to the plugin’s documentation for all of its options.
Happy scrolling!