15.02.2009
SmoothScroll for jQuery
back to overview 22 Comments by Bogdan
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
—






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.