How to use the Scroll Effect in jQuery, MooTools and Script.aculo.us
Using the famous libraries JQuery, MooTools and Script.aculo.us 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.
Now let’s initialize the scrolling:
$.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 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.
Fx.Scroll is a MooTools Plugin that can be used to scroll any element with an overflow, including the window element.
An implementation example
Do the HTML Implementation
3. Include the required files into the HEAD section of your page:
4. Initialize the Scroller:
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>
Script.aculo.us’ Effect.ScrollTo is used to scroll to a specific place in the page.
Include the libraries first:
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 </a>
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
- March 16, 2009
- article by Gabriel C.
- 7 comments
Image Reflection with jQuery, MooTools and script.aculo.us
at January 11, 2009 with 3 comments
Image Cropping with jQuery, MooTools, Prototype & script.aculo.us
at December 22, 2008 with 3 comments
Zoom Images using jQuery and MooTools
at December 21, 2008 with 2 comments
Creating an AJAX Login Form using MooTools
at December 21, 2008 with 37 comments