同样的旧问题,.scrollTop(0)在Chrome和Safari中无效

Question

首先,我要指出,我GOOGLE了,甚至看了看这里像回答这个和这个,但是,我还是没有找到我的情况下工作的解决方案.

我设计了一个页面,其中有几个固定元素覆盖页面,并使html5/css3在主文档上创建一个干净的"蒙版",从而允许主体滚动条仍然滚动底层内容.

在firefox和ie(bleh)中,scrollTop(0)工作正常.但是,正如问题所述,在我喜欢的浏览器中并没有那么多.

我记下的一件事是在scrollTo事件之前和之后调用以下内容

$("body,html,document").each(function(){ console.log($(this).scrollTop()); });

结果并不令人满意,它告诉我,scrolltop已经是0,因此甚至没有尝试使用scrollTop,或者至少那是我迄今为止"想到的".

在你问之前,我在这3个项目中的每个项目都进行了控制台调用,因为文档scrolltop应该被覆盖在其中一个项目中(我会想到身体,但是就像你必须调用html一样)

任何关于想法的人？

仅供参考,它可能是一个古怪的CSS(寿它是如何工作的IE浏览器,而不是铬我真的无法理解),但我已经尝试用下面的负面结果:

$(window).scrollTop(0);
$(document).scrollTop(0);
$("html").scrollTop(0);
$("body").scrollTop(0);
window.scroll(0,0);
$("body,html,document").scrollTop(0);
$("body,html").scrollTop(0);

我想这扩展了我的问题,这是一个CSS问题吗？我没有外部链接,代码太长(用CI视图Partials制作)发布所有内容,但要澄清我做了什么:

• 修复了页眉,页脚和侧边栏,使内容与文档滚动条一起滚动
• 到目前为止实现的javascript或jquery非常少,在预定元素的固定位置之外几乎有0个自定义css
• "内容"是基于单边栏导航器中单击的列表项使用jQuery的.load函数的ajax

临时小提琴不再起来

Answer 1

我有同样的问题.如果我放

$(window).scrollTop(0);

在文档就绪处理程序中,它没有工作; 但如果我在Chrome开发者工具包的javascript控制台面板中测试它,它就可以了!唯一的区别是脚本的执行时间.所以我试过了

window.setTimeout(function() {
    $(window).scrollTop(0); 
}, 0);

它起作用了.设置大于0的延迟不是必要的,尽管这也有效.这不是jQuery的错,因为它是一样的

window.scrollTo(0, 0);  window.scroll(0, 0);

所以原因可能是浏览器在呈现页面并执行js后填充window.pageYOffset属性.

Answer 2

对于需要溢出设置的人来说,解决方法是使用这样的动画.

    $('#element_id').stop().animate({ scrollTop: 0 }, 500);

这似乎表现得比.scrollTop(0).

Answer 3

问题出在CSS上.特别是我在下面列出的规则.

html, body {
    overflow-x: hidden;
    overflow-y: auto;
}

虽然这些规则显然与滚动条有关,但我不确定它们为什么会导致您正在观察的行为.但如果你删除它们,它应该解决你的问题.

请参阅:http://jsfiddle.net/jNWUm/23/.