Question

我想创建一个动画，以便在点击锚链接时平滑地滚动页面，就像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执行此操作或如何执行跨浏览器兼容的代码。

谢谢！

Answer 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 设置动画

Answer 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>

有没有YUI 2.x相当于jQuery的scrollTo？

2 个答案: