Smoothly scroll to anchor links with LocalScroll
Wednesday, July 7, 2010 at 1:42AM 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!
Reader Comments (1)
Hi Ace
I'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.