当html，正文设置为高度时如何滚动顶部:100%

Question

除非我从正文和 html 中删除height: 100%，否则以下内容将不起作用。但是，我需要这种样式，因为我正在将其用于页面上的其他元素。

.html

<a href="#" id="scrollTop">Back to top</a>

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这意味着当我们在正文上使用溢出时，scrollTop 不起作用，html

Answer 2

我在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

如果您只能使用最小高度，它不会破坏滚动功能。（仅在 Chrome 中测试）

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

Answer 4

@Andrew Tibbetts：你的问题为什么设置溢出：隐藏会阻止滚动。

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

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

自滚动顶部以来，是我们向上滚动了多少。

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/