jQuery scrollTop跨浏览器不一致

时间:2012-01-27 23:24:01

标签: javascript jquery scrolltop

在Chrome和Safari中,$("body").scrollTop(1000)符合预期。

在IE和FF中,没有任何反应。

在IE和FF中,$(window).scrollTop(1000)有效,但它们会转到不同的地方。它也可以在Chrome和Safari中使用,但它们也可以在不同的地方使用。他们似乎关闭了300-500像素。

是否有任何一致的方法来设置跨浏览器工作的scrollTop属性,如果没有,为什么jQuery不抽象这个?

我也希望为它制作动画,这在Chrome和Safari中运行良好,但在其他浏览器中则无效。

我唯一的选择是进行浏览器检测吗? (不好的做法)或者有更好的方法吗?

3 个答案:

答案 0 :(得分:11)

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: myTop }, myDur);

Webkit浏览器(Chrome / Safari,Mac和Win)使用“body”,其他(FF / Opera / IE 7-9)使用“html”

喜欢浏览器检测。

答案 1 :(得分:6)

尝试

$(document).scrollTop("...");

答案 2 :(得分:0)

您需要将scrollTop应用于bodyhtml,具体取决于浏览器,但同时将其应用于两者都不会造成任何损害。由于.scrollTop()适用于集合中的第一个元素,但.animate()适用于所有元素,您可以执行以下操作:

$('body, html').animate({
  scrollTop: 1000
}, 'fast');

如果您希望立即应用更改,请将速度('fast')更改为0。或者,您可以使用以下内容,但我更喜欢上述语法:

$('body, html').each(function() { $(this).scrollTop(1000); });