当html,body设置为height:100%时如何scrollTop?

rob*_*b.m 16 javascript jquery

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

HTML

<a href="#" id="scrollTop">Back to top</a>
Run Code Online (Sandbox Code Playgroud)

jQuery的

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

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

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

CSS

html, body {height:100%; min-height:100%;}
Run Code Online (Sandbox Code Playgroud)

rob*_*b.m 14

得到了这个问题,感谢我发现的评论body: overflow-x:hidden,这意味着当我们在body,html上使用overflow时,scrollTop无效


Mat*_*aic 6

body { height: 100%; }scrollTop(0).有同样的问题.

由于我没有能够改变HTML/CSS的原因不同,解决方法是删除height之前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', '');
Run Code Online (Sandbox Code Playgroud)