Packagecom.greensock.plugins
Classpublic class ScrollToPlugin
InheritanceScrollToPlugin Inheritance TweenPlugin Inheritance Object

Allows TweenLite and TweenMax to animate the scroll position of either the window (like doing window.scrollTo(x, y)) or a <div> DOM element's content (like doing myDiv.scrollTop = y; myDiv.scrollLeft = x;). To scroll the window to a particular position, use the window as the target of the tween like this:
//scroll to 400 pixels down from the top
TweenLite.to(window, 2, {scrollTo:{y:400}, ease:Power2.easeOut});

Or to tween the content of a div, make sure you've set the overflow:scroll on the div and then do this:

//scroll to 250 pixels down from the top of the content in the div
TweenLite.to(myDiv, 2, {scrollTo:{y:250}, ease:Power2.easeOut});

You can define an x or y value or both (to scroll on both the x- and y-axis). For example, to scroll to 400 pixels from the top and 200 pixels from the left, do this:

TweenLite.to(myDiv, 2, {scrollTo:{y:400, x:200}, ease:Power2.easeOut});

By default, the ScrollToPlugin will automatically sense if the scroll position was changed outside of itself (like if the user manually started dragging the scrollbar mid-tween) and cancel that portion of the tween. If, however, you'd like to prevent the auto-killing behavior, set autoKill:false inside the scrollTo object, like:

TweenLite.to(myDiv, 2, {scrollTo:{y:400, autoKill:false}, ease:Power2.easeOut});
To scroll to the maximum scroll position, use the string "max" as the value, like this:
TweenLite.to(myDiv, 2, {scrollTo:{y:"max"}});
If you don't wrap the value in an object, it will assume you want to scroll in the "y" direction, so these two lines are funtionally equivalent:
TweenLite.to(myDiv, 2, {scrollTo:{y:"max"}});
TweenLite.to(myDiv, 2, {scrollTo:"max"});

Copyright 2008-2014, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html or for Club GreenSock members, the software agreement that was issued with the membership.