是否有相当于 jQuery 的 scrollTo 的 YUI 2.x？答案

【问题标题】：Is there a YUI 2.x equivalent to jQuery's scrollTo?是否有相当于 jQuery 的 scrollTo 的 YUI 2.x？
【发布时间】：2012-11-08 20:54:33
【问题描述】：

我想创建一个动画以在单击锚链接时平滑滚动页面，就像 jQuery.ScrollTo 插件 (http://demos.flesler.com/jquery/scrollTo/) 一样。

我尝试使用 YUI 2.x 动画实用程序通过动画属性 document.activeElement.scrollTop 的值来制作它。它仅适用于 webkit :'( - 在其他浏览器上，什么也没有发生 - 甚至没有引发错误。

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

我想知道是否有一个插件可以为 YUI 2.x 做这个，或者如何做一个跨浏览器兼容的代码来做这个。

谢谢！

【问题讨论】：

标签： javascript cross-browser yui

【解决方案1】：

您需要记住，根据浏览器的不同，您可能需要滚动 html 或 body 元素。

（实际上，您需要滚动两者才能确定）

我也看到了http://developer.yahoo.com/yui/animation/#scroll

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

也许这就是你要找的东西（你仍然必须为 html 和 body 制作动画）

【讨论】：

【解决方案2】：

<script>
(function() {
  var scrollingBody = document.body;
  if (YAHOO.env.ua.gecko){
    scrollingBody = document.documentElement;
  }
  (new YAHOO.util.Scroll(
    scrollingBody,
    {
        scroll:
        {
            to: [0, 50]
        }
    },
    0.7,
    YAHOO.util.Easing.easeOut
)).animate();
})();
</script>

【讨论】：