jquery 当 html 和正文自动溢出时，scrollTop 不起作用

Question

当 html 和主体样式如下所示时，scrollTop() 不起作用的主要问题：

html
  margin: 0
  padding: 0
  border: 0
  overflow: auto

body
  padding: 0
  margin: 0
  background-image: url('/imgs/bg1.jpg')
  overflow: auto
  background-repeat: no-repeat

我的js代码：

$('.get_method').click(function () {

  $('body').animate({
     scrollTop: $(".test").offset().top
  });

});

当我从 html 或正文元素（或任何地方）删除溢出属性时，一切正常，但当我滚动文档 BG 图像结束时，我变成白色 space。我需要的只是修复 BG 图像和单击 .get_method 按钮时有效的 scrollTop 动画效果。

编辑：

元素 .test 它是一个 div 元素。 CSS:

.test
  position: relative
  top: 900px

Answer 1

试试这个

demo

html

 <h1>Top of the page</h1>

<article style="height: 1000px">
    <p style="margin-bottom: 600px">Scroll down the page&hellip;</p>
    <p>Then click the box.</p>
    <a href="#" class="scrollup">Scroll</a>
</article>

jquery

$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });

    $('.scrollup').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });

});

jquery 当 html 和正文自动溢出时，scrollTop 不起作用

jquery scrollTop doesn't work when html and body overflow auto

html

css

jquery

overflow

scrolltop