javascript - 如何使用 JQuery 和 Material-Design-Lite 滚动到顶部

Question

我一直在我的网站中使用 Material-Design-Lite，并且还使用 JQuery 来显示滚动到顶部的按钮。但他们并没有一起工作。安装了 Material-Design-Lite 后，单击该按钮不会执行任何操作。

<div class='back-to-top'>
  <a class='hvr-icon-spin' href='#'/>
</div>

<script>
  $(window).scroll(function() {
    if($(this).scrollTop() &gt; 200) {
      $(&#39;#back-to-top&#39;).fadeIn();
        } else {
        $(&#39;#back-to-top&#39;).fadeOut();
        }
        });
      $(&#39;#back-to-top&#39;).hide().click(function() {
        $(&#39;html, body&#39;).animate({scrollTop:0}, 600);
        return false;
        });
</script>

有没有其他方法可以解决这个问题？我尝试过不使用 JQyery，但它也不起作用。我尝试使用它的网站是 here.

Answer 1

这可能是由于主容器、 header 的位置固定而发生的。并且 Material 设计在 mdl 容器中使用溢出。因此，使用此代码滚动顶部:

$(".mdl-layout__content").animate({scrollTop:0}, 500, "slow");