Javascript jQuery在Opera bug上设置scrolltop动画

有人试过使用吗

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

在Opera浏览器上

它会产生一种奇怪的效果，尤其是当你在一个长页面上滚动时，看起来页面会先向上滚动，然后向下滚动到正确的点。这是一种奇怪的令人不安的效果

---

有什么解决办法吗？感谢

该属性在过去没有正确定义。我认为，它是由IE引入的，然后由不同的用户代理实施反向工程。自那以后，它在（仍然是一个工作草案）中进行了描述。到今天为止，Opera中仍然存在一个漏洞，正在修复中

##可能是黑客

解决办法是

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

要小心，因为如果Opera在某一点修复了它，代码可能会表现得异常。

为什么？

• 在Firefox和IE quirks模式下，您必须在“body”上设置属性以使页面滚动，而如果在“html”上设置则忽略该属性
• 在Firefox和IE标准模式下，您必须在“html”上设置属性以使页面滚动，而如果在“正文”上设置则忽略该属性
• 在Safari和Chrome中，无论是哪种模式，都必须在“body”上设置属性以使页面滚动，而如果在“html”上设置，则忽略该属性

由于页面处于标准模式，他们必须同时在“html”和“正文”上进行设置，否则在Safari/Chrome中无法工作

现在是坏消息；在Opera中，当您读取主体的滚动顶部时，它正确地为0，因为主体在文档中不可滚动。但是如果您在“html”或“主体”上设置滚动偏移量，Opera将滚动视口。因此，动画设置了两个属性，一个用于“html”，一个用于“主体”。第一个从正确的位置开始，而第二个从0开始，导致闪烁和奇数滚动位置

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

这可能是一个更好的解决方案，不需要使用任何特定于Opera的函数，也不需要考虑怪癖模式

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

我也在歌剧院工作

---

编辑：在firefox中不起作用，但我也有这个问题。这就是我所用的，而且很有效。它不是浏览器嗅探，但对我来说，它不是特别好的代码。现在，它起作用了

在Opera11/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效果（怪癖也应该包括在内。Ugh），并为Chrome和Safari设置正文效果

在Opera中，它试图同时滚动html和正文，从而导致大量异常，scrollTop返回一个大于0的数字，因此您只调用html，而不会得到闪烁的废话

因此，您可以在必要时安全地使用html和正文，或者在浏览器运行时仅使用html

别忘了默认值（）否则这将是你不得不担心的另一个奇怪的闪烁

嘿，我不是JS忍者，但我很努力，这对我来说很有效，我现在没有时间像我想的那样去调查，所以我想我应该把这篇文章贴在这里并提供帮助。如果我错了，我会举手说出来因此，请提供反馈：D

汤姆。

是的！ 我在

click（）

函数中调用的

animate（{scrollTop:}）

函数的操作有问题

最好的方法是，这是由Divya Manian在这里写的

在调用滚动函数或动画函数之前，需要使用

event.preventDefault（）

，以在开始滚动事件之前结束单击事件

大概是这样的：

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

$（）。单击（函数（事件）{
event.preventDefault（）；
$（'html，body'）.animate（{scrollTop:}，600）；
});

---

<> > >编辑：将滚动方法应用到<代码> $'（‘HTML，正文’）< /COD>元素< /p> @ CAAMEL考虑创建演示（例如jsFoDLE）不需要ScLoLTOP（）是否需要在窗口上应用？我认为这是正确的做法。

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