javascript html, body 设置为 height: 100% 时如何滚动顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21124874/
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
How to scrollTop when html, body is set to height: 100%?
提问by rob.m
The following won't work unless I remove height: 100%from body and html. However, i need that style as I am using it for other elements on the page.
除非我height: 100%从正文和 html 中删除，否则以下内容将不起作用。但是，我需要这种样式，因为我将它用于页面上的其他元素。
html
html
<a href="#" id="scrollTop">Back to top</a>
jQuery
jQuery
$("#scrollTop").on("click",function(e){
e.preventDefault();
$(window).animate({scrollTop: 0}, 'slow');
});
Even tried the following with still negative results
甚至尝试了以下结果仍然是负面的
$("#scrollTop").on("click",function(e){
e.preventDefault();
$("body, html").animate({scrollTop: 0}, 'slow');
});
Css
css
html, body {height:100%; min-height:100%;}
采纳答案by rob.m
Got the issue, thanks to comments I noticed I had body: overflow-x:hiddenwhich means scrollTop isn't working when we are using overflow on body, html
得到了问题，感谢我注意到我有评论body: overflow-x:hidden，这意味着当我们在 body、html 上使用溢出时，scrollTop 不起作用
回答by Matija Mrkaic
I had the same problem with body { height: 100%; }and scrollTop(0).
我body { height: 100%; }和和有同样的问题scrollTop(0)。
Since I was not able to change html/css for different reasons,
workaround was to remove heightbefore scrollTop, and then revert to initial state.
由于我因不同原因无法更改 html/css，解决方法是删除heightbefore scrollTop，然后恢复到初始状态。
// Change height:100% into auto
$('body').css('height', 'auto');
// Successfully scroll back to top
$('body').scrollTop(0);
// Remove javascript added styles
$('body').css('height', '');
回答by i_a
If you can just use min-height, it won't break the scroll functions. (tested in Chrome only)
如果你可以只使用 min-height，它不会破坏滚动功能。（仅在 Chrome 中测试）
body, html {
min-height: 100%;
}
回答by Akshay Vijay Jain
@Andrew Tibbetts: your question why does setting overflow: hidden prevent scrolltop.
@Andrew Tibbetts：您的问题为什么设置溢出：隐藏防止滚动顶部。
As per my understanding, when we say overflow hidden, we are saying, we do not want to show the extra part, i.e please hide the extra part
根据我的理解，当我们说溢出隐藏时，我们是说，我们不想显示多余的部分，即请隐藏多余的部分
So we do not want to scroll, that means scrolltop will always remain 0
所以我们不想滚动，这意味着 scrolltop 将始终保持为 0
since scrolltop, is how much we have scrolled upwards.
从 scrolltop 开始，就是我们向上滚动了多少。
回答by Сергей Навроцкий
$(document).on('click', '.action', function() {
$('html, body').css({height: 'auto'}).animate({
scrollTop: $("#container").offset().top
}, 500);
});回答by Alex W
This worked for me:
这对我有用：
$("#scrollTop").on("click",function(e){
$('html,body').animate({scrollTop: 0}, 'slow');
});
