Quick Guide: Adding Smooth Scrolling to Your Webpages

by Nathan Rohler

Faster Connections Beget... Condensation?

The wide use of broadband connections in today's developed world means that web professionals can create webpages that hold more content than in the past. This isn't so much an opportunity for verbosity (indeed, the pace of today's society calls for succinctness), as it is an opportunity for condensation. Instead of having three shorter pages, we can now have a single longer page that provides continuity by displaying all information in direct proximity. In many cases, this arrangement represents the relationship between different sections of information and ideas better than the traditional multi-page model. You've likely seen this principal of condensation in action while browsing the web.

To provide navigation from section to section on this type of longer page, links are used – just as with the more traditional pages. The difference is that links don't direct from one page to another; instead, they link to different points on the single page.

Linking To Specific Points on a Page

When we want to link to a specific point on a page, the standard tool that HTML provides is the named anchor. Here's how that works:

• At the destination point (e.g. a Contact form at the bottom of the page), we add a named anchor tag at the start of the section:
  <a name="contact"></a>
  This is an invisible element that doesn't appear to visitors in the browser.
• To link to this point (e.g. from the top of the page), we link using the hash character (#) and the name of the destination anchor:
  <a href="#contact">Go To Contact Form</a>

While this default method is fully functional, there's a usability problem: clicking that link makes the user jump instantly to the bottom of the page. Because the user doesn't see any of the content between the link they clicked (at the top of the page) and the destination content (at the bottom of the page), they feel lost and the relationship between sections is destroyed.  A clear representation of this relationship was the original reason for condensing the multiple sections into a single page, so we have a problem.

The Solution: Smooth Scrolling

The solution? To quickly and smoothly scroll the page to the destination content, but take a short time to do so.  This time allows the user to see what content is being skipped over, giving her a clear sense of her current location. You've probably seen this in action. Often, sites have a small scroll to top link on some pages. When you click that link, the page quickly but smoothly scrolls to the top instead of instantly rocketing you there. The effect is aesthetically pleasing and ensures that you don't lose your bearings.

Smooth scrolling vs instant jumping is the difference between using a baseball and a bullet to hit a close target. Both have the same effect – hitting the target. However, the baseball can be visually tracked by an observer and the bullet cannot. With the baseball, the observer understands the starting point, the ending point, and the path taken; with the bullet, the ending point is the only clue to the path taken.

I'm going to help you make it drop-dead easy to add this effect to your pages. Click here for a demo of the effect we're going to create.

A Matter of JavaScript

Smooth scrolling is implemented on a page via JavaScript code. While the needed code can be somewhat complicated, the good news is that the jQuery JavaScript library, in combination with the jQuery.localScroll plugin, makes the process painless. To simplify the process, I'm going to give you a condensed script that will make the process even more painless. Condensation saves the day again, huh?

1. Update Your Links

First, identify each of the anchor links in your page that you want to use smooth scrolling. On each link, add class="smoothScroll" like this:

<a href="#contact">Go To Contact Form</a>

Becomes:

<a href="#contact" class="smoothScroll">Go To Contact Form</a>

2. Add The Special Script To Your Site

Download this .zip file and unzip it. Add the tiny smoothscroll.js file to your site in a convenient location, such as a javascript/ folder.

Note: This script was updated September 10, 2012 to included the latest versions of the localScroll and scrollTo plugins, which ensure full compatibility with recent jQuery and browser version combinations. Thanks to Deirdre for the heads-up!

3. Add The Scripts To Your Page

Now, it's time to add the script to your page. The script requires jQuery, so you'll need the following two lines just before the closing </body> tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript/smoothscroll.js"></script>

Update the bolded reference to smoothscroll.js so that it points to the real location of the file you added in step 2. If you already included jQuery elsewhere in your page, you won't need the first line.

That's It!

If you load your updated page in a browser, all of the local anchor links that have class="smoothScroll" should automagically trigger smooth scrolling instead of instant jumping. Simple as that. If it doesn't work, check your browser's debugging console for any syntax errors.

Feel free to use this script in any of your projects, commercial or otherwise. Again, it's based on the jQuery.localScroll plugin by Ariel Flesler, so a big thanks to him. Find this guide and script helpful? Share with your friends. Have thoughts or comments? Please let us know below!