jquery - .animate() 查询不工作

Question

我想在我的静态 HTML 网站中实现一个“滚动回到顶部”按钮，就像我以前做过一百万次一样。所以我添加了这段代码:(第一部分是让按钮在一定时间后出现，不用担心)

$( document ).ready(function() {

    $(window).scroll(function() {
        var scroll = $(document).scrollTop();
        var wheight = $(window).height();
        var hheight = wheight / 2;
        if(scroll >= hheight) {
            $('#scroller').css({'opacity': '1'});
        } else if (scroll <= hheight) {
            $('#scroller').css({'opacity': '0'});
        }
    });

    $('#scroller').click(function() {
        alert("click works!");
        $('html, body').animate({ scrollTop: 0 }, 500);
    });
});

按钮的出现和消失有效，如果我单击该按钮，它还会提醒“点击有效”。但是滚动不起作用。我搞不清楚了。我在某处读到你不应该在你的 CSS 中使用 height: 100% 并使用

height: auto;
min-height: 100%;

相反。那不会改变任何事情。我还尝试使用 document 作为要滚动的元素。

如果有人能帮助我，我很高兴!

Answer 1

看来您的代码有效:

$( document ).ready(function() {

    $(window).scroll(function() {
        var scroll = $(document).scrollTop();
        var wheight = $(window).height();
        var hheight = wheight / 2;
        if(scroll >= hheight) {
            $('#scroller').css({'opacity': '1'});
        } else if (scroll <= hheight) {
            $('#scroller').css({'opacity': '0'});
        }
    });

    $('.scroll').click(function() {
        $('html, body').animate({ scrollTop: 0 }, 500);
    });
});

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
}

body {
  background: linear-gradient(to top, red, blue);
  height: 2000px;
  border: 10px solid goldenrod;
  position: relative;
}

.scroll {
  font-size: 2em;
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="scroll">scroll</button>