SmoothScroll Using MooTools 1.2

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

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?

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.

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

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 –

<script type=”text/javascript”>
window.addEvent(‘domready’,function() {
//smooooooth scrolling enabled
new SmoothScroll({ duration:700 }, window);
});
</script>

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

Fossli

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

gooing 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
谢谢，很好