dtsn · I build cool stuff for the web. Hi I'm Daniel and I blog about design, JavaScript and CSS. Find out more about me and subscribe to my feed.
14 Mar

Scriptaculous ScrollTo

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);
});

6 Comments

  • Permalink
    Scriptaculous ScrollTo Tutorial | foojam.com 15/03/2008

    [...] Saxil-Nielsen has a nice Scriptaculous tutorial showing off Effect.ScrollTo(). Short and sweet  tutorial that will give you a nice little effect [...]

  • James Conroy-Finn 03/08/2008

    Beautiful site… Very nice!

  • Tim Schneider 08/08/2008

    I’ve been looking around trying to find instructions on how to do this based on the anchor in the url on page load. I would like a link on one site to load another site and automatically scroll to the section based on the anchor. Anyone know how?

  • Daniel 08/08/2008

    Hi Tim,

    This is really easy to accomplish. Firstly if you are using prototype you can use:
    document.observe(“dom:loaded”, function() {
    // when we load, get the string
    var location=window.location.toString();
    // search the string for a #
    if(location.indexOf(“#”)!=-1) {
    // work out the element
    var element=location.substring((location.indexOf(“#”)+1));
    new Effect.ScrollTo(element);
    }
    });

  • Jeremy 14/08/2008

    Hi all. I’m new to prototype and scriptaculous. I’d like to use this scroll element on a site I’m working on. I have a menu in one div, and I’d like for it to work so that when an item in the menu is clicked, it scrolls content in a separate div on the same page. Any help is greatly appreciated. Thanks a lot.

  • Permalink
    Bookmarks about Scriptaculous 20/08/2008

    [...] http://blox.svbasi.com/?p=54 – bookmarked by 4 members originally found by wenderlan on 2008-07-29 Scriptaculous ScrollTo [tutorial] http://www.dtsn.co.uk/2008/03/14/scriptaculous-scrollto-tutorial/ – bookmarked by 3 members [...]

Reply