Question

I want to create an animation to scroll the page smoothly when clicking on anchor links, just like jQuery.ScrollTo plugin (http://demos.flesler.com/jquery/scrollTo/) does it.

I tried making it using YUI 2.x Animation utility, by animating the value of the property document.activeElement.scrollTop. It works on webkit only :'( – on the other browser, nothing happens – not even an error is raised.

goToAnchor = function(e, id) {
    var targetToGo = Dom.get(id),
        scrollToTarget = new Animation(document.activeElement,
            {
                scrollTop:
                {
                    from: document.activeElement.scrollTop,
                    to: targetToGo.offsetTop
                }
            },  1,  Easing.easeOut
        )
    Event.preventDefault(e);

    scrollToTarget.animate();
}

What I’d like to know is if there’s a plugin that does this for YUI 2.x or how to do a cross browser compatible code to do so.

Thanks!

Answer 1

You need to keep in mind that depending on browser you might need to scroll the html or the body element.

(practially, you need to scroll both to be sure)

Also at http://developer.yahoo.com/yui/animation/#scroll i see

var element = document.getElementById('test');
var myAnim = new YAHOO.util.Scroll(element, {
    scroll: {    
        to: [ 500, test.scrollTop ]
    } 
});
myAnim.animate();

Maybe that is what you are looking for (still you will have to animate both html and body)