jQuery動畫到頂部功能不起作用

Question

我正在嘗試添加jQuery平滑滾動，單擊按鈕會將我帶到頁面頂部，但動畫不起作用。

jQuery(function( $ ){

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 800) {
            $('.fa-chevron-up').fadeIn();
        } else {
            $('.fa-chevron-up').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.fa-chevron-up').click(function(){
        $('html,body').animate({scrollTop : 0}, 800);
        return false;
    });

});

這是滾動時出現的按鈕-

<a href="#" class="scrolltotop"><i class="fas fa-chevron-up"></i></a>

嘗試過jQuery（document）仍然沒有運氣。 有任何想法嗎？

Answer 1

 jQuery(function($) { //Check to see if the window is top if not then display button $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.scrolltotop').fadeIn(); } else { $('.scrolltotop').fadeOut(); } }); //Click event to scroll to top $('.scrolltotop').click(function(e) { $('html, body').animate({scrollTop : 0}, 800); e.preventDefault(); }); }); 

 a.scrolltotop { bottom: 10px; display: none; position: fixed; right: 10px; } html { overflow-y: scroll; } div.content { height: 400vh; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content">&nbsp;</div> <a href="#" class="scrolltotop"><i class="fas fa-chevron-up"></i>^ Up</a> 

動畫不起作用，因為未調用它。 頁面滾動回到頂部的原因是因為您正在有效地導航到未定義的錨點（ href="#" ）。

更改此：

jQuery('.fa-chevron-up').click(function(){

對此：

jQuery('.scrolltotop').click(function() {

由於超棒字體圖標通常通過將字符分配為應用類的元素的偽元素來工作，因此，如果直接單擊圖標，則可能會按預期工作。 在任何情況下，你應該申請單擊處理到a通過標簽元素.scrolltotop選擇。

注意：我還更新了淡入淡出行為的選擇器。