Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

SmoothScroll Using MooTools 1.2

By  on  

A while back I wrote a post about MooTools' SmoothScroll plugin which allows you to smoothly take a user to a specific portion of a page. By default, the browser "jerks" you up or down in the page when you click on an anchor -- SmoothScroll lets you define the duration that it should take for a link to be scrolled down to.

View Demo

MooTools 1.2 has a slightly different usage of the SmoothScroll plugin. In Moo 1.2, you instantiate the plugin as follows:

//when the dom is ready
window.addEvent('domready',function() {
	//smooooooth scrolling enabled
	//new SmoothScroll({ options }, window);
	new SmoothScroll({ duration:700 }, window); //700 milliseconds to get there
});
View Demo
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

Discussion

  1. Dimitry WolotkoD

    Hi!
    This script can fluent scroll aftep press to link “Top”?

  2. david

    @Dimitry: Yes it can — I’ve corrected the issue in the example and it’s smoooooooth scrolling all over the place!

  3. Dimitry WolotkoD

    Thank you!
    Good work!

  4. nawi

    good article for me. thanks

  5. paul

    I love how this works – thanks!

  6. iampeterbanjo

    YOU SAVED ME!

  7. sebzzz

    This code resulted in an error that made all my effects unable to work.

    Then, I took your version of Mootools 1.2 and everything seems to work fine now.

    I think my version of Mootools 1.2 was without the compatibility mode. I wonder if that’s why it didn’t work.

  8. smurf

    nice one david, I’m always ‘nicking’ your stuff, ever since I stumbled across your blog, so thought it was about time I thanked you for it. :)

  9. Macrike

    For some reason, when I click the #top link it flicks right before the scroll effect. Any clue on why this happens?

    http://psnow.es/v3/index.php/analisis/articulo/call_of_duty_4_modern_warfare

    (Right at the bottom of the article)

  10. coti

    hi there,

    i wanna use this effect via flash. the problem is i have a flash button and when i press it i just wana act as a regular link. is there any option

    thanks in advance.

  11. PierreYves

    Hello,

    I’m having trouble implementing your smoothscroll on the design I’m working on.

    It is most likely due to to my centered-fixed-header-&-footer layout.

    As you can see on this page, if you click on the ‘News’ link, the 0.7s delay is “working” but not the smooth scroll…

    Any clue?

    Thanks in advance!

  12. PierreYves

    looks like i wont be able to do it… it’s caused by the overflow properties i use in my css… if anyone has experienced this and solved it, i’m interested!

  13. Skracanie linków

    Simple and genius but the is some… “but”. I tried to set above script on page with Lightview script but there is some conflict. The page doesn’t scroll at all. Any suggestions how to solve this?

  14. david

    @Skracanie: Are you using MooTools? I see Prototype.

  15. Skracanie linków

    First of all thanks for deleting that silly test comment (I could post comment with 2 links inside).
    I use Prototype as a part of Lightview. Anyway go to test-page-without-LV click on red link SpeedDial tweaks. Works fine right? Ok, now go to test-page-with-LV Yup, doesn’t work… Any idea?

  16. tstorm

    I’m trying to get all my js working together and updated. I had a functioning smoothscroll with mootools.v.1.11, but then I added an accordion which would only work with v.1.2. Now, though, if I load v.1.2, my smoothscroll stops working (as does my css style switcher). My Safari “Inspect Element” tool also claims that the fn.bind function “is not object,” whatever that means.

    My site (js and css playground, no more): http://www.wiscostorm.net/stories

    Any suggestions, anyone?

  17. Bruja

    Hey! Thanks for the code. But I have a problem, it seems to be with the prototype and the scryptaculous scripts. The mootool interfere with those. Can you please help me?

    thanks again.

  18. david

    @Bruja: MooTools and Prototype are not compatible.

  19. Bruja

    ouch! thanks for the answere… but, can mootools make the divs draggable?

  20. david

    @Bruja: Yes.

  21. Håvard Fossli

    first i didn’t get it to work in opera.
    but with this line instead it works perfectly!

    var tmp = new SmoothScroll({duration:
1000, wait: false, wheelStops :
true},$(document.body));
  22. Bruja

    Thanks, man. Can you tell me how? Or where can I find those instructions?

    I hope not to be annoying

  23. Matt

    Once again you come up with the solution I was looking for. I knew how to do this with jQuery but not Mootools and could only find the outdated moo demo for v1.1. Thanks again!!

  24. eva ~°

    hello,

    I have a tag on my pages, so when I click to the anchors, it goes directly to the home page… grrr… is there any way to work it out?

    thanks!

  25. eva ~°

    sorry the tag is <base href=”” />

  26. lightfire

    Kodėl ant mozilla neveikia scriptas tik backtop, o ant Explorer neveikia backtop

  27. lightfire

    Why on mozilla work backtop, on explorer script works but doesn’t work backtop

  28. EVula

    @Bruja: You should use Slimbox. It’s an exact clone of Lightbox 2, but it uses MooTools instead of Prototype. http://www.digitalia.be/software/slimbox

    There are also a slew of other lightbox-type scripts out there that use MooTools, but that one is the closest to what you already have (ie: you can switch to MooTools and none of your visitors will know what happened).

  29. ram

    david, did you realize that all of your smoothscroll demo is not working with opera?

  30. andychin

    Thank you for providing such a great stuff for us.
    I have been trying to integrate this thing into a new web but I just couldn’t get it work. Maybe some of you expert can shed some light? I am not good in these scripting thingy.

  31. dirtyBird

    Hi David,
    Im having some troubles I have copied the uncompressed MooTools 1.2 and saved as a JS via dreamweaver. here is the scripting code in my head – 

        window.addEvent('domready',function() { 
        //smooooooth scrolling enabled
        new SmoothScroll({ duration:700 }, window); 
    });

    and it is still jumping like a regular html anchor…I have no idea what I’m doing wrong. Can you help?
    much thanks!

  32. dirtyBird

    sorry this is the first part of the JS in head

  33. fearlex

    I love it, exactly what i was looking for, thanks !!!

    BTW: Awesome blog !!!

  34. Fossli

    as i said. using this line solves all my problems.. with opera, and the delay, and everything, and all weird behaviors..

    var tmp = new SmoothScroll({duration:
1000, wait: false, wheelStops :
true},$$(document.body));
  35. dirtyBird

    Fossli-
    Where do you add this? in the head or in the JS? Please let me know as I am having some major Opera issues. Great on all other browsers/platforms now.
    Thank you in advance.

  36. dirtyBird

    Nevermind, got that. has anyone had issues with spacing in Opera caused by this script? when I remove it, spacing is fine. When I ad the script it doubles spacing (margin) on last two div’s.
    http://www.dirtybirddesign.com/NewWeb/index.html

  37. anand

    Would you please tell me where to place the code

    var tmp = new SmoothScroll({duration:
1000, wait: false, wheelStops :
true},$$(document.body));

    Thanks

  38. Stefan Suarez

    Can it scroll sideways?
    Can any smooth scroll move sideways?
    Do anchors even work sideways?
    Is this a stupid question?
    Please answer it anyway..

  39. Berko

    Can someone post a link to a SmoothScroller that is MooTools 1.11 compatible. I have scripts I am trying to run that aren’t compatible with 1.2. It would be a great help. Thanks!

  40. matthewethan

    Are there any gallery functions (lightbox, etc.) that this is compatible with?
    I can’t seem to get it to play well with others.

  41. Oscar C.

    Hello David, this is just what i was looking for, thanks! :)

    Also, I have a problem implementing it. I’m developing an “all-in-one” website with hidden divs (Fx.Slide) and the instance of SmoothScroll seems not to be working. I’m using internal HTML anchors as yours and MooTools 1.2.1 Core and More (full builds)

    Can be Fx.Slide preventing the action of Smooth Scroll? Firebug is more quiet than ever, and i don’t have any clue. Thanks in advance.

  42. Ajans

    Wow ! This is wonderful ! I am not think it for my blog, integrating now ! : ) Thanks you too much..

  43. Randy Jensen

    Is there anyway to setup the smoothscroll so that if you are coming from mypage1.html which has a link to mypage2.html#myanchor, the page will smoothscroll to the anchor?

    Thanks for the tut!

  44. Erik

    Is it possible to use smoothscroll from a “top” link inside an iFrame used as a fotter at the bottom of my parent page? I want the link to take me to the top of the page (parent).

  45. george gurrola

    works nice as advertised, but what if… what if i create a scrolling div and place my anchors and targets inside this div… … my experimentation did not work…. better yet what if… what if i place my links outside of the scrolling container to target inside the scrolling div(this would be ideal)… but it does not work (scrolling effect) :(…

    working demo —
    http://www.gurroladesign.com/www.simplepagestructure.com/scroll_to_top.html

    my experiment demo —
    http://www.gurroladesign.com/www.simplepagestructure.com/scroll_to_top4.html

    any thoughts, thanks

  46. george gurrola

    Going through the mootools doc… i found the fix!

    $('link-c4').addEvent('click', function(e) {
var myFx = new Fx.Scroll('container', {
    duration: 800,
    wait: true
}).toElement('c4');
e.stop();
});

    clciking from an outside container to another container with overflow… sweet… who needs flash when you got mootools!
    http://www.gurroladesign.com/www.simplepagestructure.com/scroll_to_top4.html

  47. abe

    how can i get milkbox to work with this? it seems to be conflicting with mootools-smoothscroll.js. They both both on their own, but together they both fail…
    thanks.

  48. tim

    Can you smooth scroll an iframe from a link in the parent page?
    It would be AWESOME if you could post a blog on that.

  49. Gio

    The script seems to have some issues on opera 9.6x

  50. Marc

    I cant get it to work in Safari, any clues why?

  51. JON

    Hi can this be modified to scroll horizontally?

  52. dope259

    cannot get it to work on safari 3.2.1, any idea?

  53. Charley

    Can you use this within a div element on a page that has overflow set to auto (so as to auto scroll within that element only and not the whole web page)?

  54. sarahi

    i really love this effect!
    i was lookin’ for this one a very long time!

  55. MGadAllah

    Please I am using phpBB forum software and I want to apply this code to take place when I hit the button go to the top under any thread.

    So please help me how can I use this code correctly?

    Thanks :)

  56. nikkibryan

    how to enable the vertical scroll?

  57. Darren

    Hi,

    How would I call this from flash?

    Say I had a button that I was using to trigger an id of C5. I presume the code would be something along the lines of:

    getURL("javascript:myfunction();");

    Thanks,
    Darren

  58. M. Querling

    i like this hot effect!

  59. derschreckliche

    Hmmm, in Opera 10 only the 5th link scrolls down smoothly – the other do some crazy stuff and then the screen is at the anchor.
    But Nice effect in firefox.

  60. ethos2.0

    Hi David,

    How to use smoothscroll to navigate in the document with form ? Is it possible ?

    Tx a lot,
    ethos.

  61. ethos2.0

    with a “select” form, my bad…

  62. Nenad

    Great post!
    I really like the idea, such a cool effect… :]

    btw, your entire blog is so amazing, it always reminds me how much I suck when it comes to web designing and programming in general and it always makes me work even harder to learn new stuff and to expand my knowledge.

    keep up the great work!
    cheers!

  63. kim

    Hey david can you please paste the Html and css for this example. thanks

  64. Michael

    @kim

    Grab it from the Demo site :)

  65. 超

    good
    谢谢，很好

  66. jorge

    @Charley:
    yes, here’s an implementation that works http://www.gurroladesign.com,
    but im using 1.2dev, it falls aprt in the lates release?

  67. MP

    Is this nice thingy working with latest Mootools? I can’t get it to work!

  68. george gurrola

    oops i just got it to work using the latest copy of mootools… just make sure you download the CORE plus the MORE…
    if you want it to scroll within a container, make sure you set the parent container to overflow:hidden, if coded correctly this can go to infinity? well in my case it went 3 levels deep, check it out
    http://www.gurroladesign.com/x7 here’s another demo of the concept http://www.jorgeluisgurrola.com

    cheers

  69. Gus

    Can you provide a download link for the elements needed for this? Likewise, it would be good to know which barebones MooTools components are at work here. Most developers make a download link that serves the less experienced user very nicely. It can be really confusing trying to sort out javascripts, css, and other code snippets that don’t apply on the source of your demo page. And I’m guessing the extraneous code has something to do with why I (and others) might not get this working well right off the bat.

  70. george gurrola

    it’s quite simple actually, it’s just a question of “scope” its easy to get lost when your embedding divs… download the latest copy of core and more(i believe you only need the fx class, but just go ahead and dowload the whole thing)… define your parent container, that parent container must have a fixed height and width and here’s the key, “overflow:hidden”… now all other child containers will be inside this container, and these child container must also be the same height as the parent container( there are many tricks you can do here, it just depends what you want)… for each child container, you must have your target elements “” then just plug and play… send me an email and i’ll send you a barebone example…jlgurrola@yahoo.com

    but here’s another demo using the same technique
    http://www.gurroladesign.com/adv07/

  71. jorge luis

    aight my peeps here we go a barebone example that illustrates the vertical plus horizontal implementation…

    http://www.gurroladesign.com/x8/mootools_scrollbox_demo.html

    attention: not using the fx.smoothcroll rather just the fx.smooth class… download the latest copies of core and more… feel free to rip up my demo… the scope is a tricky issue, so keep your eyes open

  72. Gus

    Jorge, thanks for your expertise.

    You say quite strongly: ” … that parent container must have a fixed height and width and here’s the key, overflow:hidden… now all other child containers will be inside this container, and these child container must also be the same height as the parent container.”

    But I note in your last example that the parent container does not set overflow:hidden. To confuse matters even more, your containers differ in size. Yet your example works. Mine only partially works because there are a lot of issues with the divs stacking on top of each other. I wish I knew the answer.

    Clearly the javascript file called “center.js” or “auto-center.js” plays a role in the success of this, but I can’t figure out what it is. I’m fairly sure that this secondary script is implicated in the vertical placement of my scroller, but nothing is mentioned here about it. Ideally I’d like to eliminate that added script altogether. Been there, tried that, and I know that it has to stay.

  73. jorge luis

    hi gus… there are quite a few containers to achieve the effect one container defines the fine border(for aesthetics only) and another container (parent container) does have the overflow:hidden or else the scrolling would not work….

    the auto-center is also there for aesthetics, nothing to do with the mootools script othen than being called into action… here’s a demo were i commented out the autocenter call…

    http://gurroladesign.com/x8/mootools_scrollbox_demo_2.html

    yeah go ahead and delete the auto-center script and the call, it has nothing to do with it… if you want post a link of what your trying to do, and ill troubleshoot it

  74. jorge luis

    here we go…

    #vertical-parent-container {
height:120px;
overflow:hidden;
}

#horizontal-parent-container {
height:120px;
width:560px;
overflow:hidden;
}

    these are the parent containers… but for aesthetics i added a border and here we go

    #vertical-parent-container-line {
border:1px solid #333333;
}

#horizontal-parent-container-line {
border:1px solid #333333;
}

    the reason i need a another div was because padding/margin is an issue when you scroll one element to another element… it literally goes to that elements regardless of any padding in the parent container… for design/aesthetics i knew i needed a seperate div for the border…

    on the the horizontal example it is a little bit more complicated in that you need an extra div to force the divs to lay in a horizontal direction.

    #horizontal-frame {
width:2240px;
}

    yeah just reverse-engineer it, im sure that after 3 attempts you’ll get lot closer to that you actually need… i was gonna do a real real bare bone example but it would just be too dry…

    @jorge luis:

  75. jorge luis gurrola

    @Gus @ dennis: here we go guys a really barebone barebone demo
    http://gurroladesign.com/x8/mootools_scrollbox_barebone_demo.html

    its as bare as it can be

    hope this helps

  76. Armando

    Does any one know where i can find a good smoothscroll movie tutorial.. ik looking for weeks now.

    thanx.

  77. maria

    could anyone tell me how i can scroll diagonally , vertical and horizontal like the site:
    http://www.julianarojas.com.ar

    thanks!

  78. Francesco

    Hi. Great script.
    Just one question: how can I fix the x position of my scrolling divs? My divs have a certain margin from the left side of the page, if I resize my page and than click a link, it scrolls smoothly both way, horizontal and vertical. is it possible to keep the x fixed?

    thanks!

  79. Frank

    Simple and nice. Thanks for this hint.

  80. Omar

    Thanks alot David,

    I am freelance designer of websites and use your smooth scrooling plugins. I really like it.

  81. Mario

    for a long time I used a smoothscroll.js that worked horizontal and vertical but for some reason I had to update the mootool framework to the current version. Now it is scrolloing down and up only. Is there any possibility to get horizontal scrolling ?

  82. chris

    Code works great and horizontally too brilliant i just cannot understand as soon as i add overflow: hidden; to my container in my css it will not work and i really dont know anyone have any ideas would be really grateful

  83. modo

    Brilliantly brilliant!

  84. Samsungwave2 Rooting

    Hi there would you mind stating which blog platform you’re working with? I’m planning to start my own blog soon but I’m having a tough time choosing between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m looking for something unique. P.S Sorry for being off-topic but I had to ask!

  85. Manzur Ahmed

    awesome piece of code. working perfectly for me. see here http://www.apibangladesh.org in action!

  86. Alex Boston

    Hi

    Was wondering if anyone could help.

    This works perfectly by itself, however trying to get it working with Slimbox, IT WORKS, but then slimbox won’t. But if I take it out, Slimbox will work perfectly. If anyone has had the same problem or simliar some help would be much appreciated.

    • Chris

      Hi Alex sounds like it maybe a jQuery conflict I had same problem with my scroll script conflicting with several jQuery lightboxes as soon as I took it out it would work and so forth I added

      jQuery.noConflict(); to my jQuery script and then for every $ I replaced with jQuery and that worked for me and it solved the problem I found this article here http://forums.modx.com/index.php?topic=33038.0 . But from what I can see is that Slimbox1 uses the mootools framework and slimbox2 uses the JQuery Framework.. This worked for me anyhow and it may for you.. Then again I could be completely wrong.. Hope this may help

    • Alex Boston

      Hi Chris

      Thanks for your help.

      Ended up solving the problem by using the Mootools more file and removing the smoothscroll js file.

      Both were using Mootools.

      If anyone gets a similar problem try going to http://mootools.net/more/ and selecting the elements you want for your entire document.

  87. Chris

    Hi Alex sounds like it maybe a jQuery conflict I had same problem with my scroll script conflicting with several jQuery lightboxes as soon as I took it out it would work and so forth I added

    jQuery.noConflict(); to my JQuery script and then for every $ I replaced with jQuery and that worked for me and it solved the problem I found this article here http://forums.modx.com/index.php?topic=33038.0 .

    But from what I can see is that Slimbox1 uses the mootools framework and slimbox2 uses the JQuery Framework..

    This worked for me anyhow and it may for you.. Then again I could be completely wrong.. Hope this may help

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