jQuery scrollTop 不能在 Chrome 中工作，但可以在 Firefox 中工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3042651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery scrollTop not working in Chrome but working in Firefox
提问by Maju
I have used a scrollTopfunction in jQuery for navigating to top, but strangely 'the smooth animated scroll' stopped working in Safari and Chrome (scrolling without smooth animation) after I made some changes.
我scrollTop在 jQuery 中使用了一个函数来导航到顶部，但奇怪的是，在我做了一些更改后，“平滑动画滚动”在 Safari 和 Chrome 中停止工作（滚动没有平滑动画）。
But it is still working smoothly in Firefox. What could be wrong?
但它在 Firefox 中仍然可以顺利运行。可能有什么问题？
Here is the jQuery function I used,
这是我使用的jQuery函数，
jQuery:
jQuery：
$('a#gotop').click(function() {
$("html").animate({ scrollTop: 0 }, "slow");
//alert('Animation complete.');
//return false;
});
HTML
HTML
<a id="gotop" href="#">Go Top </a>
CSS
CSS
#gotop {
cursor: pointer;
position: relative;
float: right;
right: 20px;
/*top:0px;*/
}
回答by Aaron Harun
Try using $("html,body").animate({ scrollTop: 0 }, "slow");
尝试使用 $("html,body").animate({ scrollTop: 0 }, "slow");
This works for me in chrome.
这在 chrome 中对我有用。
回答by user2971963
If your CSS htmlelement has the following overflowmarkup, scrollTopwill not function.
如果您的 CSShtml元素具有以下overflow标记，scrollTop则不会起作用。
html {
overflow-x: hidden;
overflow-y: hidden;
}
To allow scrollTopto scroll, modify your markup remove overflowmarkup from the htmlelement and append to a bodyelement.
要允许scrollTop滚动，请修改您的标记，overflow从html元素中删除标记并附加到body元素。
body {
overflow-x: hidden;
overflow-y: hidden;
}
回答by Alejandro del Río
It works in both browsers if you use scrollTop() with 'document':
如果您将 scrollTop() 与 'document' 一起使用，它可以在两种浏览器中使用：
$(document).scrollTop();
...instead of 'html' or 'body'. Other way it won't work at the same time in both browsers.
...而不是'html'或'body'。其他方式它不会在两个浏览器中同时工作。
回答by Steven
I have used this with success in Chrome, Firefox, and Safari. Haven't been able to test it in IE yet.
我在 Chrome、Firefox 和 Safari 中成功使用了它。尚未能够在 IE 中对其进行测试。
if($(document).scrollTop() !=0){
$('html, body').animate({ scrollTop: 0 }, 'fast');
}
The reason for the "if" statement is to check if the user is all ready at the top of the site. If so, don't do the animation. That way we don't have to worry so much about screen resolution.
“if”语句的原因是检查用户是否在站点顶部准备就绪。如果是这样，不要做动画。这样我们就不必太担心屏幕分辨率了。
The reason I use $(document).scrollTopinstead of ie. $('html,body')is cause Chrome always return 0 for some reason.
我使用$(document).scrollTop而不是 ie的原因。$('html,body')是因为 Chrome 出于某种原因总是返回 0。
回答by NVI
Scroll body and check if it worked:
滚动正文并检查它是否有效：
function getScrollableRoot() {
var body = document.body;
var prev = body.scrollTop;
body.scrollTop++;
if (body.scrollTop === prev) {
return document.documentElement;
} else {
body.scrollTop--;
return body;
}
}
$(getScrollableRoot()).animate({ scrollTop: 0 }, "slow");
This is more efficient than $("html, body").animatebecause only one animation used, not two. Thus, only one callback fires, not two.
这比$("html, body").animate因为只使用一个动画而不是两个动画更有效。因此，只有一个回调被触发，而不是两个。
回答by RAM
I had a same problem with scrolling in chrome. So i removedthis lines of codes from my style file.
我在 chrome 中滚动时遇到了同样的问题。所以我从我的样式文件中删除了这行代码。
html{height:100%;}
body{height:100%;}
Now i can play with scroll and it works:
现在我可以玩滚动，它的工作原理：
var pos = 500;
$("html,body").animate({ scrollTop: pos }, "slow");
回答by Reigel
maybe you mean top: 0
也许你的意思是 top: 0
$('a#gotop').click(function() {
$("html").animate({ top: 0 }, "slow", function() {
alert('Animation complete.'); });
//return false;
});
from animate docs
来自动画文档
.animate( properties, [ duration ], [ easing ], [ callback ] )
propertiesA map of CSS properties that the animation will move toward.
...
.animate( properties, [ duration ], [ easing ], [ callback ] )
properties动画将朝向的 CSS 属性映射。
...
or $(window).scrollTop()?
或者$(window).scrollTop()？
$('a#gotop').click(function() {
$("html").animate({ top: $(window).scrollTop() }, "slow", function() {
alert('Animation complete.'); });
//return false;
});
回答by Maar10
// if we are not already in top then see if browser needs html or body as selector
var obj = $('html').scrollTop() !== 0 ? 'html' : 'body';
// then proper delegate using on, with following line:
$(obj).animate({ scrollTop: 0 }, "slow");
BUT, best approach is to scroll an id into your viewport using just native api (since you scroll to top anyway this can be just your outer div):
但是，最好的方法是仅使用本机 api 将 id 滚动到您的视口中（因为您无论如何滚动到顶部，这可能只是您的外部 div）：
document.getElementById('wrapperIDhere').scrollIntoView(true);
回答by Aamir Afridi
I use:
我用：
var $scrollEl = $.browser.mozilla ? $('html') : $('body');
because read jQuery scrollTop not working in Chrome but working in Firefox
回答by Mohamed Allal
If it work all fine for Mozilla, with html,body selector, then there is a good chance that the problem is related to the overflow, if the overflow in html or body is set to auto, then this will cause chrome to not work well, cause when it is set to auto, scrollTop property on animate will not work, i don't know exactly why! but the solution is to omit the overflow, don't set it! that solved it for me! if you are setting it to auto, take it off!
如果它对 Mozilla 一切正常，使用 html,body 选择器，那么问题很可能与溢出有关，如果 html 或 body 中的溢出设置为自动，那么这将导致 chrome 无法正常工作，因为当它设置为自动时，动画上的 scrollTop 属性将不起作用，我不知道为什么！但解决办法是省略overflow，不要设置！那为我解决了！如果您将其设置为自动，请将其取下！
if you are setting it to hidden, then do as it is described in "user2971963" answer (ctrl+f to find it). hope this is useful!
如果您将其设置为隐藏，则按照“user2971963”答案中的描述进行操作（ctrl+f 找到它）。希望这是有用的！
