如何使用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，但也沒有用。 我正在嘗試使用的網站在這里。

Answer 1

這可能是由於主容器，標頭的固定位置引起的。 材料設計使用mdl容器中的溢出。 因此，使用此代碼滾動頂部：

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

Answer 2

您可以嘗試使用

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

Answer 3

您可以使用以下鏈接進行檢查。

http://jsfiddle.net/6qrQF/88/

 jQuery(document).ready(function() {
  //set the link
  jQuery('#top-link').topLink({
    min: 500,
    fadeSpeed: 100
  });
  //smoothscroll
  jQuery('#top-link').click(function(r) {    
    jQuery("html, body").animate({ scrollTop: 0 }, 300);
  });
});

Answer 4

對我來說，它與：

$('.mdl-layout').animate({scrollTop:0}, 'slow');