Scriptaculous ScrollTo [tutorial]

Example: Click Here!

The script.aculo.us effects library is a fantastic tool. If this really simple tutorial I will show you how to utilize the scroll method and a handy ‘jump to top link’.

Step 1: Add References

Make sure you have the prototype and script.aculo.us
libraries attached to your web page, instructions for how to do this can be found here.

Step 2: Create JavaScript

You can either create a new JavaScript file or append these functions to an already existing one. So first of all we need the function. For that we create a new JavaScript object, we will call this ’scroll’.

var  scroll = { }

Next we want to add the functions. In my case I want a function that will scroll to the top and to the bottom:

var  scroll = {
	top: function(event) {  },
	bottom: function(event) {  }
}

Now we have our framework we can call the ScrollTo function:

new Effect.ScrollTo('top');

The ScrollTo function allows you to define a particular object that you want to scroll into view. In the case of dtsn.co.uk, I have a div on the top of every page with the ID of ‘top’.

Putting that all together we get:

var  scroll = {
	top: function(event) { new Effect.ScrollTo('top'); },
	bottom: function(event) { new Effect.ScrollTo('footer'); }
}

You can then call this function in one of two ways. You can call ’scroll.top()’ and ’scroll.bottom()’, respectively, through the onclick method on any HTML object. Alternative you can use the prototype method of Event.Observe:

// wait for the page to load
Event.observe(document, 'load', function(){
        // give an object an onclick method
	$('go_to_top').observe('click', scroll.top);
});