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!

Advertisements

One thought on “Smoothly scroll to anchor links with LocalScroll

  1. Hi AceI'm actually trying to implement the localScroll plugin, but never succeed. I used differents versions of the js files in case mine's aren't the good ones, verified links and HTMLl implementation, read several sites about that "so-easy-to-implement-plugin"…But I'm far from beeing a javascript guru so it's probably a stupid error that I can't notice…So, I made an implementation (wich doesn't work) on this test page , could you have a look on it and say me if you see something wrong ? Thanks by advance.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s