SmoothScroll Using MooTools 1.2
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.
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
});
![Animated 3D Flipping Menu with CSS]()
CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...
![9 Mind-Blowing WebGL Demos]()
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...
![AJAX Username Availability Checker Using MooTools 1.2]()
![MooTools 1.2 OpenLinks Plugin]()
I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips...
Hi!
This script can fluent scroll aftep press to link “Top”?
@Dimitry: Yes it can — I’ve corrected the issue in the example and it’s smoooooooth scrolling all over the place!
Thank you!
Good work!
good article for me. thanks
I love how this works – thanks!
YOU SAVED ME!
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.
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. :)
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)
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.
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!
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!
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?
@Skracanie: Are you using MooTools? I see Prototype.
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?
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?
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.
@Bruja: MooTools and Prototype are not compatible.
ouch! thanks for the answere… but, can mootools make the divs draggable?
@Bruja: Yes.
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));Thanks, man. Can you tell me how? Or where can I find those instructions?
I hope not to be annoying
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!!
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!
sorry the tag is <base href=”” />
Kodėl ant mozilla neveikia scriptas tik backtop, o ant Explorer neveikia backtop
Why on mozilla work backtop, on explorer script works but doesn’t work backtop
@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).
david, did you realize that all of your smoothscroll demo is not working with opera?
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.
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!
sorry this is the first part of the JS in head
I love it, exactly what i was looking for, thanks !!!
BTW: Awesome blog !!!
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));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.
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
Would you please tell me where to place the code
var tmp = new SmoothScroll({duration: 1000, wait: false, wheelStops : true},$$(document.body));Thanks
Can it scroll sideways?
Can any smooth scroll move sideways?
Do anchors even work sideways?
Is this a stupid question?
Please answer it anyway..
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!
Are there any gallery functions (lightbox, etc.) that this is compatible with?
I can’t seem to get it to play well with others.
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.
Wow ! This is wonderful ! I am not think it for my blog, integrating now ! : ) Thanks you too much..
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!
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).
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
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
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.
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.
The script seems to have some issues on opera 9.6x
I cant get it to work in Safari, any clues why?
Hi can this be modified to scroll horizontally?
cannot get it to work on safari 3.2.1, any idea?
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)?
i really love this effect!
i was lookin’ for this one a very long time!
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 :)
how to enable the vertical scroll?
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
i like this hot effect!
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.
Hi David,
How to use smoothscroll to navigate in the document with form ? Is it possible ?
Tx a lot,
ethos.
with a “select” form, my bad…
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!
Hey david can you please paste the Html and css for this example. thanks
@kim
Grab it from the Demo site :)
good
谢谢，很好
@Charley:
yes, here’s an implementation that works http://www.gurroladesign.com,
but im using 1.2dev, it falls aprt in the lates release?
Is this nice thingy working with latest Mootools? I can’t get it to work!
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
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.
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/
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.smoothcrollrather just thefx.smoothclass… 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 openJorge, 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.
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
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:
@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
Does any one know where i can find a good smoothscroll movie tutorial.. ik looking for weeks now.
thanx.
could anyone tell me how i can scroll diagonally , vertical and horizontal like the site:
http://www.julianarojas.com.ar
thanks!
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!
Simple and nice. Thanks for this hint.
Thanks alot David,
I am freelance designer of websites and use your smooth scrooling plugins. I really like it.
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 ?
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
Brilliantly brilliant!
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!
awesome piece of code. working perfectly for me. see here http://www.apibangladesh.org in action!
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.
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 helpHi 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.
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