Question

首先，我要指出，我已经用Google搜索，甚至在这里查看答案，例如this和this，但是，我还没有为我的案例找到一个有效的解决方案。

我设计了一个页面，其中有几个固定元素覆盖页面，并使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视图部分制作）发布所有内容，但是要澄清我做了什么：

修复页眉，页脚和侧边栏，保留内容以使用文档滚动条滚动
到目前为止实现的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/。

Answer 4

我刚刚在IE8和Chrome中对以下内容进行了测试，两者都有效：

$(window).scrollTop(0)

Answer 5

同时查看这个答案：scrolltop broken on android - 当溢出设置为可见并且位置为相对时，它似乎效果最好 - 但是ymmv。你可能会发现这些有用......

function repeatMeOnMouseDown() // for smooth scrolling
{
    var $newTop = $('#element_id').position().top + ($goingUp ? -20 : 20);
    $('#element_id').animate({top: $newTop}, 20, repeatMeOnMouseDown); 
}

// these should work
$('#element_id').animate({top: -200}, 200); // scroll down
$('#element_id').animate({top: 0}, 200); // scroll back up

// DON'T DO THIS - Offsets don't work with top like they do with scrollTop 
$('#element_id').animate({top: ("-= " + 200)}, 200);

// and when you get tired of fighting to do smooth animation 
// on different browsers (some buggy!), just use css and move on
function singleClick($goingUp)
{
   var $newTop = $('#element_id').position().top + ($goingUp ? -200 : 200);
    $('#element_id').css({top: $newTop}, 20); 
}

Answer 6

仅供参考，如果不是在顶层，即在iframe中，只需尝试window.top.scrollTo（0,0）;

Answer 7

我在chrome中滚动时遇到了同样的问题。原因是height:100%和body中的html样式。 See this answer

Answer 8

此代码已在chrome中测试过。 http://jsfiddle.net/wmo3o5m8/1/

(function () {
    var down = false, downX, downY;
    document.onmousedown = function (e) {
        downX = e.pageX;
        downY = e.pageY;
        down = true;
    };
    document.onmouseup = function () { down = false; };
    document.onmousemove = function (e) {
        if (down) {
            window.scrollTo(
                window.scrollX + downX - e.pageX,
                window.scrollY + downY - e.pageY
            );
        }
    };
})();

Answer 9

这是您在css中为overflow: hidden或html dom元素声明body时的正常行为，您可以在jQuery API docs中阅读：

垂直滚动位置与像素数相同隐藏在可滚动区域上方的视图中。如果滚动条是在最顶部，或者如果元素不可滚动，则此数字将为是0。

使用overflow: hidden滚动条不可见因此元素不可滚动，因此在您将使用的每个（我很奇怪）浏览器中，该数字将为0。

Answer 10

我在MacOS上遇到了这个问题。我试着放：

$(window).scrollTop(0);
document.body.scrollTop = document.documentElement.scrollTop = 0;

在$(window).load中，但仍然无法正常工作。

然后我尝试使用一些技巧：

$('body')
  .css('position', 'fixed')
  .delay(200)
  .promise()
  .done(function() {
    $('body').css('position', 'relative');
  });

，效果很好！位置固定类型的将<body>与<html>分开{em}，从而将窗口滚动位置有效地设置为零。然后经过200毫秒的延迟（为了安全起见），我将position: relative放回了。

我希望这会有所帮助。谢谢。

同样的老问题，.scrollTop（0）在Chrome＆amp;苹果浏览器

10 个答案: