Smooth Scrolling with MooTools Fx.SmoothScroll
I get quite a few support requests for my previous MooTools SmoothScroll article and the issue usually boils down to the fact that SmoothScroll has become Fx.SmoothScroll. Here's a simple usage of Fx.SmoothScroll.
The HTML
<a href="#contact">Contact Us</a> <!-- goes down to the contact area --> <!-- more stuff here --> <a name="contact" id="contact"></a> <h2>Contact Us</h2> <-- more stuff here -->
The only HTML requirement for Fx.SmoothScroll is that all named anchors be given an identical id attribute.
The MooTools JavaScript
new Fx.SmoothScroll({
duration: 200
},window);
Fx.SmoothScroll accepts two arguments: the area to scroll (defaults to the window) and options for the class. The default options are usually sufficient. One recommendation I do have is to make the duration quick -- no one wants to wait for the animation to finish.
Happy scrolling!
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
It is very useful, thanks man ;) very good tutorials!
What is wrong with standard browser’s anchor scroll? It is faster which is surely better for UX.
@ace: I find the default browser behavior abrupt and crude. Smoothscroll is far more elegant.
…love your tuts but this one is not working in opera (at least in the latest beta, i.e. 10.52.3344) :-(
hi David, can this script be modified so that the window can be any defined div other than the browser window?
thanks, excellent site
hi, how can i scroll if i’m already using acors for ajax stuff..? i’ve seen it on other pages – they scroll without using the ancor. thx
One issue with this script is that it somewhat breaks the back button. Hitting back only changes the URL’s hash, but not the scroll position. I created a similar script a while back I called Gentle Anchors that fixes that issue, but it does have a jolt a the start of the scroll, which I may fix one day. I’m not saying mine is perfect either. Nice addition to MooTools.
@David Walsh:
Love this!
I have added an earlier version of the effect to make my anchors ‘#top’ scroll smoothly to the top of the page:
http://www.richardperkingolf.co.uk/index.aspx
However it is effecting all ‘#’ references so when you click on the accordion menu on the right it too scrolls the page to the top.
Do you know how I could edit this to only scroll to the top my ‘#top’ anchors?
Hi,
I’m not sure if it’s the right place to ask this…
I’m using MooTools smoothscroll on my website and I was wondering if it’s possible to not modify the url in the adress bar ?
Basically, if I click on an anchor, url will change like this : http://www.mysite.com/index.html#anchor
I saw on several websites the same effect ( smoothscroll or equivalent with jQuery ) with the same url for all anchor : http://www.mysite.com/index.html
The ” best ” example : http://wallswaps.com/ ( multiple anchors, always the same url ).
Any idea ?
Thanks in advance
@Kendall: Thanks for the info, your script does it all for me. No problems with the back button, nice and small at 5k and by editing line 34 as you suggested /#[a-zA-Z0-9:\._-]+/ to /#top/ just targets my specific anchor and doesn’t interfere with the #p7APMc1_2 anchors in my accordion.
@jorge luis: According to a post of the google-group of mootools this is not possible as smoothScroll only targets the browser-window. You’ve got to use fx.scroll instead.
Hello David,
I am having some problems with this. It is working fine in all other browser except IE, however for some reason the one that you have is working.
I am not sure if I am missing something. Can you please take a look at my website and let me know what is going on?
Thanks in advance!!
I got it to work, you can disgard the previous post. : )
Thank you! Works great! but for some reason yours works in Safari. Mine not so. I used .core and .more fx.smoothscroll and with Safari I get the same old leap to tag. Any suggestions?