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.

<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">
<!--
$(document).ready(function()
{
$.localScroll({
		queue:true,
		duration:1000
});
});
-->
</script>

$.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 http://mootools.net/download and download the full MooTools Core Library.
2. Go to http://mootools.net/more 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();

});

});
-->
</script>

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]

Script.aculo.us’ Effect.ScrollTo is used to scroll to a specific place in the page.

Example

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

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

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

[Go to project page | View Demo]

Stay updated by subscribing to our weekly newsletter! It's free!

Name:

Email:

We respect your email privacy

What do I get as a subscriber?

• Latest posts delivered to your inbox
• Ways to make money online
• News regarding web development in general

Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!