Animated Scrolling

The YUI Animation Utility allows you to animate the scroll position of an HTMLElement.

For this example, we will animate the scroll position of a <div> element named demo. The scroll attribute, introduced in the YAHOO.util.Scroll subclass, accepts an optional control field of one or more control points

Add a little style so that we can see the animation in action:

Create the demo element and a button to run the animation:

Now we create an instance of YAHOO.util.Scroll, passing it the element we wish to animate, and the scroll attribute (an array of [left, top] scroll values), with the scroll amount we are animating:

The final step is to call the animate method on our instance to start the animation. The button will be the trigger that begins the animation sequence:

This is an example of animating the scrolling of an HTMLElement.