爲什麼不是'滾動到頂部'按鈕代碼工作？

我編寫了這個「scrollToTop」按鈕，這樣當用戶向下滾動時，會出現一個按鈕，當點擊將頁面滾動到頂部時。但由於某種原因，它不起作用。爲什麼不是'滾動到頂部'按鈕代碼工作？

有被報告到控制檯沒有語法錯誤......

問題：我現在看到的是什麼，CSS的要細，因爲如果我刪除顯示：無;樣式是正確的，按鈕顯示在正確的位置，但問題是，當我向下滾動頁面時，按鈕不顯示，這意味着JavaScript不應用fadeIn（）;的事情，但我不知道爲什麼......

HTML

<a href="#" class="scrollToTop"></a>

CSS

.scrollToTop{ 
    width:75px; 
    height:75px; 
    padding:10px; 
    text-align:center; 
    text-decoration: none; 
    position:fixed; 
    top:100px; 
    right:40px; 
    opacity:0.5; 
    display:none; 
    background: url('images/scroll_up.png') no-repeat 0px 0px; 
    background-size: 75px 75px; 
    -webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */ 
    transition: all 0.3s; 
} 

.scrollToTop:hover{ 
    text-decoration:none; 
    top:90px; 
    -webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */ 
    transition: all 0.3s; 
}

的JavaScript/jQuery的

$(document).ready(function(){ 
    //Check to see if the window is at the top, if not, then display scroll up button 
    if ($(this).scrollTop() > 100) { 
     $('.scrollToTop').fadeIn(); 
    } else { 
     $('.scrollToTop').fadeOut(); 
    } 

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

來源

2014-12-19 NepsName

你有充分的滾動事件後檢查當前滾動位置：

$(document).ready(function(){ 
    //Check to see if the window is at the top, if not, then display scroll up button 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 100) { 
      $('.scrollToTop').fadeIn(); 
     } else { 
      $('.scrollToTop').fadeOut(); 
     } 
    }); 

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

EXAMPLE

來源

2014-12-19 11:18:37 friedi

這應該工作包，併爲小提琴表演，它的工作，但在我的網站，它不......圖像沒有顯示，控制檯不報告任何東西......：\ – NepsName 2014-12-19 11:33:47

好吧，它現在正在工作，我想出了問題，問題是我已經設置了overflow-x：隱藏到html/body，由於某種原因打破了這段代碼。無論如何感謝您的幫助！ – NepsName 2014-12-19 11:54:03

這

if ($(this).scrollTop() > 100) { 
    $('.scrollToTop').fadeIn(); 
} else { 
    $('.scrollToTop').fadeOut(); 
}

纔會被調用一次，當準備好文檔的代碼部分。你需要檢查這爲用戶向上和向下滾動，例如，你可以在窗口中滾動事件

$(document).ready(function() { 
    //Check to see if the window is at the top, if not, then display scroll up button 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 100) { 
      $('.scrollToTop').fadeIn(); 
     } else { 
      $('.scrollToTop').fadeOut(); 
     } 
    }); 

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

來源

2014-12-19 11:18:51 MLeFevre

爲什麼不是'滾動到頂部'按鈕代碼工作？

回答

相關問題