jQuery动画滚动到顶部在Opera浏览器上存在问题

Question

有人尝试过使用吗？

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

在Opera浏览器上？

如果您在长网页上滚动，它会产生奇怪的效果。它似乎先将页面跳至顶部，然后再向下滚动到正确的位置。这是一个奇怪而令人不安的效果...

有没有解决此问题的方法？谢谢。

- Francesco

---

@caamel 考虑创建一个演示（例如在jsfiddle中） - Šime Vidas

scrollTop()不需要在窗口上应用吗？我认为这是适当的做法。 - Savageman

Answer 1

这个属性在过去没有被正确定义。我认为它是由IE引入的，然后被不同的用户代理反向工程实现。它已经在CSSOM（仍然是一个工作草案）中描述。截至今天，在Opera中确实存在一个错误，正在处理中。

## 可能的黑客。

一个解决方案将是

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

请注意，如果Opera在某个点上修复了它，代码可能会表现出奇怪的行为。

为什么？

- 在Firefox和IE quirks模式下，您必须在“body”上设置属性才能使页面滚动，而如果您在“html”上设置，则会被忽略。 - 在Firefox和IE标准模式下，您必须在“html”上设置属性才能使页面滚动，而如果您在“body”上设置，则会被忽略。 - 在Safari和Chrome中，在任何模式下，您都必须在“body”上设置属性才能使页面滚动，而如果您在“html”上设置，则会被忽略。

由于页面处于标准模式下，他们必须在“html”和“body”上都设置它，否则在Safari / Chrome中无法工作。

现在是坏消息；在Opera中，当您读取body的scrollTop时，它正确地为0，因为body在文档中不可滚动。但是，如果您在“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 );
        }
    }

- karlcow

Answer 2

这个http://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html#opera可能是更好的解决方案，而不使用任何Opera特定功能并考虑到怪异模式。

- Divya Manian

Answer 3

$("body:not(:animated)").animate({ scrollTop: destination}, 500 );
return false;

对我来说可以，在欧朋也可以。

编辑：但在火狐上不起作用。

- Oleg

Answer 4

没错！我在调用click()函数中的animate({scrollTop: })函数时遇到了问题。

最好的方法是http://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html#opera，这篇文章是由Divya Manian撰写的。

在调用滚动函数或动画函数之前，需要使用event.preventDefault()来结束点击事件，然后开始滚动事件。

像这样：

$(<clicked_element>).click(function(event){
    event.preventDefault();
    $('html, body').animate({scrollTop: <value>}, 600);
});

编辑：将滚动方法应用于$（'html，body'）元素非常重要。

- crazzyaka

Answer 5

我也遇到过这个问题。这是我使用的解决方法，它有效。虽然不是浏览器嗅探，但对我来说代码并不是特别好看。不过目前它能够工作。

在 Opera 11 / IE 8 / FF 3.6 上调用 html 元素的 scrollTop 返回一个大于零的数字。

在 Chrome 10 / Flock 3.5 / Safari 5（Windows 版）上调用 html 元素的 scrollTop 返回 0。

所以只需要测试一下：

如果浏览器是 Opera，则测试 scrollTop 是否大于 0，并仅在 html 上调用 scrollTop，如下所示：

var html = document.getElementsByTagName('html')[0];

var body = document.getElementsByTagName('body')[0];

$(html).animate({scrollTop:0+'px'},{'duration':1000,'easing':'swing'});

如果浏览器是Chrome、Flock或Safari，则scrollTop将返回0，你可以进行相应的测试和操作：

$(html,body).animate({scrollTop:0+'px'},{'duration':1000,'easing':'swing'});

所以，你需要在标准模式下的FF和IE上设置html效果（quirks也应该被覆盖）。而在Chrome和Safari上则需要在body上设置。

在Opera中，它尝试滚动html和body，从而导致大量的怪异现象。scrollTop返回一个大于0的数字，因此你只需要调用html，就不会出现闪烁的问题。

因此，在必要时可以安全地同时使用html和body，或者在浏览器为Opera时仅使用html。

别忘了preventDefault()，否则会出现另一种奇怪的闪烁问题。;)

嘿，我不是JS高手，但我很努力，这对我有用，我现在没有时间去深入研究它，所以我想在这里发布并提供帮助。如果我错了，我会举起手来承认。;) 所以，请给予反馈。:D

汤姆。

- Tom