2

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

谢谢！

4

2 回答 2

2

您需要记住，根据浏览器的不同，您可能需要滚动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）

于 2012-11-08T12:52:51.937 回答
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>
于 2012-11-08T12:54:33.100 回答