关于Opera bug的jQuery动画滚动顶部

Question

有没有人尝试使用过

$(“html, body”).animate({scrollTop:0}, 'slow');

在Opera浏览器上？

它会产生一种奇怪的效果,特别是如果你在一个长页面上滚动,它似乎首先到达顶部,然后向下滚动到正确的点.这是一种奇怪的令人不安的影响......

有没有解决方法来解决它？谢谢

Answer 1

过去没有正确定义该属性.我认为它是由IE引入的,然后进行逆向工程以由不同的用户代理实现.自从CSSOM(仍然是工作草案)中描述以来.截至今天,Opera仍然存在一个错误,正在修复过程中.

##可能的黑客攻击.

解决方案将是

$(window.opera?'html':'html, body').animate({ 
  scrollTop:0}, 'slow' 
);

要小心,因为如果Opera修复它,代码可能会表现得很奇怪.

为什么？

• 在Firefox和IE怪癖模式中,您必须在"body"上设置属性以使页面滚动,而如果您在"html"上设置它则会被忽略.
• 在Firefox和IE标准模式下,您必须在"html"上设置属性以使页面滚动,而如果将其设置在"body"上则忽略它.
• 在Safari和Chrome中,无论在哪种模式下,您都必须在"正文"上设置属性以使页面滚动,而如果您在"html"上设置它则会被忽略.

由于页面处于标准模式,因此必须在"html"和"body"上设置它,否则它将无法在Safari/Chrome中使用.

现在这是坏消息; 在Opera中,当你读取正文的scrollTop时它正确为0,因为正文在文档中是不可滚动的.但是,如果在"html"或"body"上设置滚动偏移,Opera将滚动视口.因此,动画设置了两个属性,一个用于"html",一个用于"body".第一个从正确的位置开始,而第二个从0开始,导致闪烁和奇数滚动位置.

更好的解决方案,不涉及用户代理嗅探

来自http://w3fools.com/js/script.js

    // find out what the hell to scroll ( html or body )
    // its like we can already tell - spooky
    if ( $docEl.scrollTop() ) {
        $scrollable = $docEl;
    } else {
        var bodyST = $body.scrollTop();
        // if scrolling the body doesn't do anything
        if ( $body.scrollTop( bodyST + 1 ).scrollTop() == bodyST) {
            $scrollable = $docEl;
        } else {
            // we actually scrolled, so, er, undo it
            $body.scrollTop( bodyST - 1 );
        }
    }

Answer 2

这个http://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html#opera可能是一个更好的解决方案,不使用任何Opera特定的功能和计算怪癖模式.