同样的老问题，.scrollTop(0) 在 Chrome 和 Chrome 中不起作用狩猎之旅

Question

首先，让我指出，我已经用谷歌搜索过，甚至查看了这里的答案，例如 这个 和 这个，但是，我还没有为我的案例找到可行的解决方案。

我设计了一个页面，其中有几个覆盖页面的固定元素，并由 html5/css3 组成，在主文档上创建一个干净的“掩码”，从而允许正文滚动条仍然滚动底层内容。

在 firefox 和 ie (bleh) 中，scrollTop(0) 工作完美。然而，正如问题所述，在我最喜欢的浏览器中并没有那么多。

我注意到的是在scrollTo事件之前和之后调用以下

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

内容结果并不令人满意，它告诉我scrolltop已经是0，因此甚至没有尝试scrollTop，或者至少这就是我的“认为”到目前为止。

在你问之前，我对这 3 个项目中的每一个都进行了控制台调用，因为文档滚动顶部应该包含在这些项目之一中（我会认为是 body，但就像在 ie 中一样，你也必须调用 html）

有想法的接受者吗？

仅供参考，这可能是一个 css 奇怪的问题（尽管它在 IE 中工作，而不是在 chrome 中工作，我真的无法理解），但我已经尝试过以下操作，得到负面结果：

$(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

我在 chrome 中滚动时遇到了同样的问题。原因是 body 和 html 中的 height:100% 样式。 查看此答案

Answer 6

另请查看此答案：scrolltop bad 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 7

仅供参考，如果不在顶部正文中，即在 iframe 中，只需尝试 window.top.scrollTo(0,0);

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 中为 html 或 body dom 元素声明 overflow:hidden 时，这是正常行为，正如您可以在 < a href="https://api.jquery.com/scrollTop/" rel="nofollow">jQuery API 文档：

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

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

Answer 10

$('#element-id').prop('scrollTop', 0); 也应该可以解决问题。

Answer 11

我在 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');
  });

效果很好！位置固定类型将 与 分离，从而有效地将窗口滚动位置设置为零。然后，延迟了 200 毫秒（只是为了安全起见），我将 position:relative 放回去。

我希望这有帮助。谢谢。

Answer 12

$('yourElement').animate({scrollTop: 0 })

Answer 13

在 Chrome 中，现在可以将 element.scroll(0,0) 和 window.scroll(0,0) 用于可滚动元素（内容大于其元素） size 和 CSS 中的一些 元素 {overflow: auto} ），或整个页面，如 jsfiddle 这里。

为了改善总体用户体验，建议还使用
element {scroll-behavior: smooth;} 也是——这个选项是使用动画的替代方案——正如之前的答案所提到的（或者直接使用 html {scroll-behavior: smooth; } 代替）。