O'Reilly

Smooth Scrolling with MooTools Fx.SmoothScroll

By on  

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!

Track.js Error Reporting

Upcoming Events

Recent Features

  • Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event,...

  • Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • HTML5 Input Types Alternative

    As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you start using these controls or not? As much as I want to say "Yes", I think they are not yet ready for any real life...

  • Display Images as Grayscale with CSS Filters

    CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery.  CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale. Doing so requires the...

Discussion

  1. It is very useful, thanks man ;) very good tutorials!

  2. ace

    What is wrong with standard browser’s anchor scroll? It is faster which is surely better for UX.

  3. @ace: I find the default browser behavior abrupt and crude. Smoothscroll is far more elegant.

  4. Dan

    …love your tuts but this one is not working in opera (at least in the latest beta, i.e. 10.52.3344) :-(

  5. hi David, can this script be modified so that the window can be any defined div other than the browser window?

    thanks, excellent site

  6. simon

    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

  7. 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.

  8. @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?

  9. @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.

  10. Michael

    @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.

  11. 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!!

  12. Jenny

    I got it to work, you can disgard the previous post. : )

  13. David, in your example, you don’t need to create empty anchor tags – you can simply place the id on the element you want to target (eg. h2) and also do away with the “name” attribute.

    It’s a shame you can’t apply transitions for SmoothScroll for Mootools 1.12. It was possible to do this in v1.11, and I think that was better and more flexible in that sense, than it is now :(

  14. Pier Luigi

    Hi David,
    I’ve discovered a bug with Safari (at least with latest 5.0.3) that prevent your anchor matching algorithm to work.
    To see the bug simply put your demo page inside a folder with a space (or other url special chars) into the name: in those cases, Safari report links.href in url-encoded format but location.href in plain string format so the match never occurs.

    For example: with a file testsmoothscroll.html inside a folder “spaced name folder”

    links.href = file:///spaced%20name%20folder/testsmoothscroll.html
    location.href = file:///spaced name folder/testsmoothscroll.html

    Bye.

  15. David

    Hi David,

    for the life of me I can’t get this to work. Any help would be appreciated.

    The code I’m using in the header of my page:

    new Fx.SmoothScroll({
    duration: 800
    },window);

    And the body:



    info

    The anchor works correctly, but without the smoothness. It’s probably something small and idiotic I’ve left out.

    Regards,
    David.

  16. David

    Oh dear, not sure if that code is displaying correctly. I’ll try it without the tags.

    The code I’m using in the header of my page:

    new Fx.SmoothScroll({
    duration: 800
    },window);

    And the body:


    info

  17. David

    I’ll try this one more time:

    header code:

    src=”js/mootools-core-1.3.js”>
    src=”js/mootools-more.js”>

    new Fx.SmoothScroll({
    duration: 800
    },window);

    Body code:

    Inventions

    info

  18. David

    I give up. Wrapping my code in the specified code tag or otherwise does not seem to work for me.

  19. Ed

    Hi David,
    I’m having a slight issue with the script. It works beautifully until spaces are introduced into the anchor then it switches to the browsers default method. Any idea of a work around for this? I’m generating my anchor id from the title of wordpress blog posts so occasionally there’ll be a space in there.

  20. is there a jquery version of this effect…

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Get Node.js Command Line Arguments with yargs

    Using command line arguments within Node.js apps is par for the course, especially when you're like me and you use JavaScript to code tasks (instead of bash scripts).  Node.js provides process.argv but that doesn't provide a key: value object like you'd expect: Bleh.  If you want to work with a...

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...