当html，body设置为height：100％时如何scrollTop？

除非我从body和html中删除height: 100% ，否则以下操作无效。 但是，我需要这种风格，因为我将它用于页面上的其他元素。

HTML

 Back to top 

jQuery的

 $("#scrollTop").on("click",function(e){ e.preventDefault(); $(window).animate({scrollTop: 0}, 'slow'); }); 

甚至尝试了以下仍有负面结果

 $("#scrollTop").on("click",function(e){ e.preventDefault(); $("body, html").animate({scrollTop: 0}, 'slow'); }); 

CSS

 html, body {height:100%; min-height:100%;} 

Answer 1

得到了这个问题，感谢评论，我注意到我有body: overflow-x:hidden ，这意味着当我们在body上使用overflow时，scrollTop不起作用，html

Answer 2

我body { height: 100%; }也有同样的问题body { height: 100%; } 和scrollTop(0) 。

由于我因为不同的原因无法更改html / css，解决方法是在scrollTop之前删除height ，然后恢复到初始状态。

 // Change height:100% into auto $('body').css('height', 'auto'); // Successfully scroll back to top $('body').scrollTop(0); // Remove javascript added styles $('body').css('height', ''); 

Answer 3

如果你可以使用min-height，它不会破坏滚动function。 （仅在Chrome中测试）

 body, html { min-height: 100%; } 

Answer 4

@Andrew Tibbetts：你的问题为什么设置溢出：隐藏防止scrolltop。

根据我的理解，当我们说溢出隐藏时，我们说，我们不想显示额外的部分，即请隐藏额外的部分

所以我们不想滚动，这意味着scrolltop将始终保持为0

从scrolltop开始，我们向上滚动了多少。

Answer 5

 $(document).on('click', '.action', function() { $('html, body').css({height: 'auto'}).animate({ scrollTop: $("#container").offset().top }, 500); }); 

Answer 6

这对我有用：

 $("#scrollTop").on("click",function(e){ $('html,body').animate({scrollTop: 0}, 'slow'); }); 

http://jsfiddle.net/fvuy6/41/