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

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

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.

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!

Hello,
I don’t find the mistake:

smoothscrooling

high

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

top
 
 
 
 
 
 
 
 
 
TEST

 
 
suite
 
 
 
 
 
 
 
encore
 
 
 
 

 
 
 
hophop
 
 
 
 
 
 
Aller au début

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!