How to use the Scroll Effect in jQuery, MooTools and

Posted on March 16, 2009, under JavaScript, jQuery, MooTools 

Using the famous libraries JQuery, MooTools and you can easily scroll overflowed elements and the screen itself. Here’s how you can use this cool effect in each library:

JQuery.ScrollTo is an excellent, easy to implement and fully customizable plugin useful to scroll elements or the window itself. There are many ways to specify the target position and many options to customize the animation and the final position. There are 2 additional plugins that can be used with this ScrollTo: jQuery.LocalScroll & jQuery.SerialScroll.

Here’s a simple implementation example. It works for anchor elements.

First, we need to include the jquery library, the Scroll.To plugin and one if its “sons”: LocalScroll.

<script type="text/javascript" src="/js/jquery.latest.js"></script>
<script type="text/javascript" src="/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="/js/jquery.localscroll-1.2.7-min.js"></script>

Now let’s initialize the scrolling:

<script type="text/javascript">

$.localScroll() gets all the local links in the page. I’ve also used the “duration” option which represents the length of the animation (none is used as default).

In the BODY text there is the link and its target:

(put this in the footer zone of the page)

<a href="#top_zone">Go to Top Page</a>

(put this in the header zone of the page)

<a id="top_zone"></a>

A live demo of the Scroll.To Effect can be seen in the current page. Scroll down to bottom and click one of the blue arrows from the footer zone.

[Go to project page | View Demo]

Fx.Scroll is a MooTools Plugin that can be used to scroll any element with an overflow, including the window element.

An implementation example

Download the required files first
1. Go to and download the full MooTools Core Library.
2. Go to and select the Fx.Scroll plugin – Download file

Do the HTML Implementation
3. Include the required files into the HEAD section of your page:

<script type="text/javascript" src="/js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" src="/js/mootools-1.2-more.js"></script>

4. Initialize the Scroller:

<script type="text/javascript">
window.addEvent('domready', function() {  

$('top_link').addEvent('click', function(){

var myFx = new Fx.Scroll(window).toBottom();



5. Call the Script: In this example, a clicked link triggers the Scroller – the following code should be inserted in the top section of the page:

<a id="top_link" target="_blank" href="#" onClick="return false;">Go To Bottom</a>

[Go to project page | View Demo]’ Effect.ScrollTo is used to scroll to a specific place in the page.


Include the libraries first:

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js"></script>

The following code should be inserted in the BODY of your page:

<a href="#" onclick="Effect.ScrollTo('comment_post'); return false;">
Comment on this post

The ID of the target element should be ‘comment_post’.

duration – float value, in seconds, defaults to 1.0
offset – integer value, in pixels, defaults to 0

[Go to project page | View Demo]

Comment via Facebook


7 Replies to "How to use the Scroll Effect in jQuery, MooTools and"

  1. very nice tutorial, I will be using this on my site. thank you very much

  2. Thanks for this great mootool effect. I searched a lot to find this.

  3. I’ve been looking for something straightforward all over the web and I’m so happy to have found this. Thank you so much for taking the time to post this tutorial. I really appreciate it.

  4. Thx for the tip, that’s what I was looking for :)

  5. thx, I couldn’t work this out until reading this. Nice work, fella

  6. thanks so much. I’ve fighting with jquery scrollTo for hours. It’s really helpful.

Leave a Reply

* = required fields

  (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)


  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like '' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.