Deutsche Version medianotions.de subscribe RSS feed

15.02.2009

SmoothScroll for jQuery

Tags: JavaScript, jQuery | last edited: 06.11.2011


A short while ago I realized that jQuery, in comparison to MooTools, does not have a SmoothScroll class that allows “smooth” scrolling within a page, from one anchor to the next. I also could not find any plugins on jquery.com. Thanks to Google I found a few sites that deal with the topic and have thus created my own jQuery SmoothScroll script from different sources:

jQuery SmoothScroll

$(document).ready(function() {
   
   //
   // jQuery SmoothScroll | Version 11-09-30
   //

   $('a[href*=#]').click(function() {

      // skip SmoothScroll on links inside sliders or scroll boxes also using anchors or if there is a javascript call
      if($(this).parent().hasClass('scrollable_navigation') || $(this).attr('href').indexOf('javascript')>-1) return;

      // duration in ms
      var duration=1000;

      // easing values: swing | linear
      var easing='swing';

      // get / set parameters
      var newHash=this.hash;
      var oldLocation=window.location.href.replace(window.location.hash, '');
      var newLocation=this;

      // make sure it's the same location      
      if(oldLocation+newHash==newLocation)
      {
         // get target
         var target=$(this.hash+', a[name='+this.hash.slice(1)+']').offset().top;

         // adjust target for anchors near the bottom of the page
         if(target > $(document).height()-$(window).height()) target=$(document).height()-$(window).height();         

         // set selector
         if($.browser.safari) var animationSelector='body:not(:animated)';
         else var animationSelector='html:not(:animated)';

         // animate to target and set the hash to the window.location after the animation
         $(animationSelector).animate({ scrollTop: target }, duration, easing, function() {

            // add new hash to the browser location
            window.location.href=newLocation;
         });

         // cancel default click action
         return false;
      }
   });

});

Have fun!

Downloads


Bookmark or recomend this page

Write a comment


22 Comments

David

17.01.2012 04:05:31

Thank you very much! Works a charm and is very appreciated after trying so many complex, heavy js files already. Regards!!

Erik visit website

19.10.2011 20:10:43

Great! Most of the times I use the smooth scroll script from css-tricks, but that doesn’t seem to work with sticky waypoints. But this one does, and it looks awesome! Thanks, you really made my day :)

Sandy

15.09.2011 08:45:30

THANK YOU! This is perfect. I’ve been searching and searching for a good solid script that does this. Yours works flawlessly. Will be sure to credit you in the source.

Bogdan visit website

02.09.2011 17:37:11

Dear Hannes,

I am glad you like my scroll script, however what you need in the first step is a beginner tutorial for JavaScript to understand how things work.

Bogdan

Hannes

02.09.2011 14:42:07

Hi!
I’m eager to try this!
But I have no what so ever knowledge of javascripts.

How do I implement it on my website?
I imagine that I put the smoothscroll.js file in the root of my website.
Should I link to it in some way?

Where do I put the script then?

Thank you very much!
Looking forward to answers!

Dylan

14.08.2011 05:56:44

Top effort mate. Keep up the good work.

ember

10.08.2011 16:13:33

works like a charm with my wordpress powered theme! thank you so much!

Bogdan visit website

29.07.2011 17:17:19

Strange in my tests the Smothscroll Script works perfect in Chrome 12. Please let me know in which version of Chrome you had the problems.

Bogdan

szmigieldesign visit website

29.07.2011 16:44:25

Hello.

Your script seems to work pretty well. However, I can’t get it to work with Chrome. Do you have any experience on that matter?

neil hanvey visit website

14.06.2011 13:49:31

at last, a working script that doesn’t have a random offset bug. much appreciated for this

Bogdan visit website

08.06.2011 10:29:56

I am glad you like my script Jay. Unfotunately I have no sponsors, it is all sponsored by myself :-)

Jay

08.06.2011 07:10:45

I’ve tried them all and yours is the best. I think I’ll go visit your sponsors now. Thank you.

Davinder visit website

06.05.2011 13:18:10

this is simplest and awesome, thank you so much

Kars

23.04.2011 12:23:15

Simplicity FTW! I had to search a bit before I found this. I’m not an expert on JS so this was really easy to use. Thank you

Ashton visit website

09.04.2011 07:11:13

Freaking finally. I’ve had such trouble finding simple jQuery for scrolling to an anchor. Everything was over-bloated; but mostly just didn’t work. Simple ftw. Thanks

Will

19.07.2010 22:02:00

Actually, I hadn’t realized that #Name is valid for *either* of the following syntaxes:

<body id="top">
<a name="top">

e.g. var target = $(this.hash + ", a[name=’" + this.hash.slice(1) + "’]");

So, actually, the script would be improved if both were supported! :)

Bogdan visit website

11.07.2010 12:25:13

Hi Will,

thanks for you feedback! Actually the navigation is between one anchor tag to an arbitrary tag that has the matching id attribute. Like on this blog page when you click on "jump to top" the matching element is <body id="top">. Or in other words, you don’t need a second anchor tag with a name attribute.

Best,
Bogdan

Will

10.07.2010 01:51:09

BTW, changing the following line fixes the issue I mention in my previous comment.

From:
var target=$(this.hash).offset().top;

To:
var target=$("a[name=" + this.hash.substring(1) + "]").offset().top;

Will

10.07.2010 01:38:47

I think the logic is a bit incorrect if you are trying to navigate between one anchor tag to another *named* anchor tag, which is how <a href="#Blah">…</a> works by default. It tries to find something like: <a name="Blah"></a> in the DOM rather than <div id="Blah">…</div>.

It would be nice if both worked, but right now your script always assumes the latter case.

Ahrengot visit website

24.02.2010 09:56:20

Hey! Thank you for this!

I am, however, a complete javascript newbie. Could you elaborate on how to implement this, please?

Bogdan visit website

02.11.2009 17:48:54

Hey Alexei,

thanks for taking a closer look at my jQuery SmoothScroll script!

I took some time to simplify and improve the script. Point 1 should be resolved now.

As for point two: I don’t think it is the job of such a script to determine wether http://www.example.com/index.php would deliver the same page as http://www.example.com/. I think in this case the web developer needs to make sure not to mix both variants in the links of a website first of all.

Alexei

02.11.2009 15:29:24

Hey! Thanks for the snippet!
There are at least 2 cases when it fails:
1. When this.href == http://www.example.com/?id=123#foo
2. When this.href == http://www.example.com/index.php?id=123#foo and location is http://www.example.com/?id=123 (and vice-versa)
For the first one, I added && location.search == this.search to test if the query strings match.
Unfortunately, the second situation is a bit trickier, if not impossible, since the directory index can be anything.