.animate（）查詢不起作用

我想在我的靜態HTML網站中實現一個「回滾到頂部」按鈕，就像我之前做過一百萬次那樣。所以我加了這段代碼：（第一部分是關於製造一定時間後會出現按鈕，不用擔心）.animate（）查詢不起作用

$(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作爲滾動元素。

如果有人能幫助我，我很高興！

來源

2017-07-25 Pixell

你能提供html嗎？如果你有'html，body，#wrapper {height：100％; }'，你可能不得不通過'$（'html，body，#wrapper'）。animate（{scrollTop：0}，500）更改你的代碼;' – Kangouroops

不幸的是， – Pixell

看來你的代碼工作：

$(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>

來源

2017-07-25 15:06:26 fen1x

我得到它的工作！我使用了jQuery的超薄版本。只要我切換到正常生產版本一切正常。

來源

2017-07-26 08:00:25 Pixell

.animate（）查詢不起作用

回答

相關問題