Apr
6
2010

Smooth Scrolling with MooTools Fx.SmoothScroll

An article by qeqnes Comments

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.

View Demo

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

Click here to copy this code to the clipboard Click here to add this snippet to Coda Click here to add this snippet to TextMate Get the raw code

1<a href=”#contact”>Contact Us</a> <!– goes down to the contact area –>

3<!– more stuff here –>

5<a name=”contact” id=”contact”></a>

6<h2>Contact Us</h2>

8<– 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);

Click here to copy this code to the clipboard Click here to add this snippet to Coda Click here to add this snippet to TextMate Get the raw code

1new Fx.SmoothScroll({

2 duration: 200

3},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.

View Demo

Happy scrolling!