Smooth Scrolling Effect for Page Anchors

Keith Curreri - Blog Headshot

By Keith Curreri on 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.

Did you like this post? Want to get more like it?

Website Redesign Course
Subscribe
Notify of
guest
13 Comments
Inline Feedbacks
View all comments
sam
sam
9 years ago

thanks so much worked like magic

Keith
Keith
9 years ago
Reply to  sam

Glad to help Sam!

Robert Pfeifer
10 years ago

Hey man, Is there a fix for Safari, this doesn’t seem to work in Safari Chrome and Firefox work great though. Thoughts?

Rob

Keith
Keith
10 years ago
Reply to  Robert Pfeifer

Hey Robert,

It seems to work fine for me in Safari, what is it doing for you?

-Keith

Robert Pfeifer
10 years ago
Reply to  Keith

@Keith, Hi Keith, I’m on a Mac not sure if that makes a difference but in Safari, it basically acts like an old school anchor where instead of smooth scrolling it hops down the page. You can try it here: http://effusiondesign.com/Avior2012c/training-options.html, then within one of the color boxes click “Click here” for details.Again it works great in Firefox, Chrome and IE 8 & 9 but Safari on the Mac is reverting to the anchor hop instead.

Rob

Keith
Keith
10 years ago
Reply to  Robert Pfeifer

Weird, your site works for me on my Mac on Safari. Would it be possible for you to try in on a different computer and see if that changes anything? Also, maybe try clearing your cache on Safari? Let me know what happens.

-Keith

Daniel Hannon
Daniel Hannon
10 years ago

Hey Keith,

I think the issue is that you are calling the #link that is around your menu item. This is causing the page to scroll to that top of that element, then your CSS kicks in and pulls the page back down. I think the best way to fix this is to actually link to the container element.

ie: div class=”work_menuDesign” id=”yourlink”

This way you should scroll up or down to the top of this element.

Hope that helps,
Daniel

Keith
Keith
10 years ago
Reply to  Daniel Hannon

Thanks Daniel,

I bet that this is the issue. Good eye and thanks for spotting it!

Just to make sure I am clear, are you referring to the issue that Leah was having above with her site?

Thanks!
Keith

Leah
11 years ago

Hi, this tutorial was great and easy to implement. Everything works in my site, but for some reason, my page jumps when I click on the internal links. Is there a way to fix this? Thanks!

Keith
Keith
11 years ago
Reply to  Leah

Hi Leah, could you show me a link to what you are describing and I will take a look?

Leah
11 years ago
Reply to  Keith

Hi Keith, I’m sorry I forgot to include the link! It’s http://www.leahtran.com.

Keith
Keith
11 years ago
Reply to  Leah

Hi Leah,

It’s kinda tough to tell for sure without looking at your code directly on your server, but try adding a “padding-top: 110px” to the a tag that holds the anchor (ie. href=”#design”). 110px is a rough estimate and may need to be adjusted. Let me know if that works.

-Keith

Leah
11 years ago
Reply to  Leah

Hi Keith, I tried your suggestion and it didn’t work. I even tried different pixel #s to test a wide range out–still the same amount of jumping. I finally realized the problem: I’m using images as anchors/anchor links. When I switched them to text, no more jumping, but the page didn’t stop where I wanted it to.

Thanks again; I really appreciate the time you spent on this! I’ll just have to deal with what I have.

13
0
Would love your thoughts, please comment.x
()
x