Smooth Scrolling Effect for Page Anchors

November 23, 2010

Adding little details to your website can really make your site stand out. One little detail that you can add is a jQuery plugin called jQuery.ScollTo(). jQuery.Scollto() allows your website to smoothly scroll to your defined anchor points.

View demonstration

This jQuery plugin was developed by Ariel Flesler. To view the original plugin site click here.

Step 1: Add anchors to your webpage

Anchors are links inside of a single webpage. For more information on adding anchors to your webpage, see my previous article, Adding Anchors to Your Webpage.

Step 2: Download Source Files

There are three files that you need to download and use in order for this plugin to work. Right click on each file, save them onto your computer, then upload them to your server using an FTP client. You can download the .zip file with all three together here.

1) jquery.js – This is the standard jQuery javascript code used to install jQuery. Use this code or download the latest version here.

2) jquery.smoothAnchors.js

3) jquery.scrollTo

Step 3: Upload and call javascript on your page

Using an FTP client, add the three files to your web server. Once the files are on the server, add them between the <head> tags on your page using the code below. You may need to change the link src path depending on how you have your files organized.

<script src="jquery.js" type="text/javascript"></script>;
<script src="jquery.scrollTo.js" type="text/javascript"></script>;
<script src="jquery.smoothAnchors.js" type="text/javascript"></script>;

Step 4: Initiate the effect using javascript

Add the following javascript between the <head> tags of your web page:

<script type="text/javascript">
    $(document).ready(function(){          
        $.smoothAnchors("slow");
    });
</script>

Step 5: Test for problems

Now open your webpage in a browser and test to see if everything is working!

Conclusion

This article just shows you how to get smooth scrolling set up on your website. If you are interested in customizing this plugin more, check out its homepage to read a more detailed documentation on its use.

Blog