jQuery 同样的老问题，.scrollTop(0) 在 Chrome 和 Safari 中不起作用

The same old issue, .scrollTop(0) not working in Chrome & Safari

提问by SpYk3HH

First, let me point out, i've googled and even looked at answers on here like thisand this, however, I'm still yet to find a working solution for my case.

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

I've designed a page that has several fixed elements covering the page and makes of html5/css3 to create a clean "mask" over the main document, thus allowing the body scroll bar to still scroll the underlying content.

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

In firefox and ie (bleh), scrollTop(0) is working perfect. However, as stated by the question, not so much in my fav browsers.

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

Something I've made note of is to call the following both before the scrollTo event and after

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

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

The results were not pleasing, it tells me that the scrolltop is already 0 and thus is not even attempting a scrollTop, or at least that's what I "think" thus far.

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

And before you ask, i made that console call on each of those 3 items as the document scrolltop should be covered within one of those items (i would think body, but like in ie you have to call html too)

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

Any takers on ideas?

有想法的人吗？

FYI, it may be a css oddity (tho how it works in IE and not chrome i really cant understand) but I have already tried the following with negativeresults:

仅供参考，这可能是一个 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);

Which I suppose extends my question, is this a css issue? I dont have an outside link and the code is too long (made with CI view Partials) to post all of it, but to CLARIFY what i've done:

我想这扩展了我的问题，这是一个 css 问题吗？我没有外部链接，代码太长（使用 CI 视图部分制作）无法发布所有内容，但要澄清我所做的：

• Fixed header, footer, and sidebar leaving content to scroll with documet scrollbar
• very little javascript or jquery implemented thus far, almost 0 custom css outside of fixing position of presaid elements
• the "content" is ajax'd in using jQuery's .load function based on list items clicked in sidebar navigator

• 修复了页眉、页脚和侧边栏，让内容随着文档滚动条滚动
• 到目前为止实现的 javascript 或 jquery 很少，除了固定预置元素的位置之外几乎有 0 个自定义 css
• “内容”在使用 jQuery 的 .load 函数时基于在侧边栏导航器中单击的列表项进行 ajax'd

temp Fiddle no longer up

temp Fiddle不再向上

采纳答案by cheeken

The problem is with CSS. In particular, the rules I've included below.

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

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

Though these rules are obviously related to scrollbars, I'm not sure why they are causing the behavior you are observing. But if you remove them, it should solve your problem.

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

See: http://jsfiddle.net/jNWUm/23/.

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

回答by yanliang_alex

I had the same problem. If I put

我有同样的问题。如果我把

$(window).scrollTop(0);

in the document ready handler, it didn't work; but if I test it in the javascript console panel of Chrome developer toolkit, it worked! The only difference was the execution time of the script. So I tried

在文档就绪处理程序中，它不起作用；但是如果我在 Chrome 开发人员工具包的 javascript 控制台面板中测试它，它就成功了！唯一的区别是脚本的执行时间。所以我试过了

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

and it worked. Setting a delay greater than 0 is not neccesary, although that also worked. It's not jQuery's fault, because it is the same with

它奏效了。设置大于 0 的延迟不是必需的，尽管这也有效。这不是 jQuery 的错，因为它与

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

So the reason might be the browser populates the window.pageYOffset property after it renders the page and executes the js.

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

回答by user823527

For people that need the overflow settings, the workaround is to use an animation like this.

对于需要溢出设置的人，解决方法是使用这样的动画。

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

This seems to behave better than .scrollTop(0).

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

回答by ron tornambe

I just tested the following in IE8 and Chrome and both work:

我刚刚在 IE8 和 Chrome 中测试了以下内容，并且都可以正常工作：

$(window).scrollTop(0)

回答by zCoder

Also check out this answer: scrolltop broken on android- it seems to work best when overflow is set to visible and position to relative - but ymmv. You might find these useful...

另请查看此答案：scrolltop 在 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); 
}

回答by Bruno Jullien

FYI, if not in top body, i.e. in an iframe, just try window.top.scrollTo(0,0);

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

回答by RAM

I had a same problem with scrolling in chrome. Reason was height:100%style in bodyand html. See this answer

我在滚动时遇到了同样的问题chrome。原因是height:100%风格在body和html。看到这个答案

回答by BrotherDonkey

$('#element-id').prop('scrollTop', 0);should also do the trick.

$('#element-id').prop('scrollTop', 0);也应该做到这一点。

回答by Hemant Arora

I had this issue on MacOS. I tried to put:

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

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

in the $(window).loadand it still wasn't working.

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

Then I tried to use some trick:

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

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

and it worked fine! The position fixed kind of detachesthe <body>from the <html>which effectively sets the window scroll position to zero. Then with a delay of 200 milliseconds (just to be on the safer side), I put the position: relativeback.

它工作正常！位置固定的种分离的<body>来自<html>其有效地设置窗口滚动位置到零。然后延迟了 200 毫秒（只是为了更安全），我把它放position: relative回去了。

I hope this helps. Thanks.

我希望这有帮助。谢谢。

回答by IlPADlI

This code was tested in chrome. http://jsfiddle.net/wmo3o5m8/1/

此代码已在 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
            );
        }
    };
})();