當你離頁面底部100px時，淡出「滾動到頂部」按鈕

Question

我正在使用一個簡單的jQuery「滾動到頂部」插件，我在網上找到它，它運行良好。但是，當我離開頁面底部100px時，我想淡出「滾動到頂部」按鈕。誰能幫忙？這裏有一個小提琴 - https://jsfiddle.net/p1em9gph/

//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(){ 
    $('html, body').animate({scrollTop : 0},800); 
    return false; 
}); 

<a href="#" class="scrollToTop">Scroll To Top</a> 

Answer 1

您需要修改其比較scrollTop()是文檔的高度的邏輯，減去窗口的高度，減去100px的距離。試試這個：

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

Working example

更新

從您的評論下面這聽起來像你只需要在div顯示當滾動是從頂部或底部100像素，其中情況下，試試這個：

$(window).scroll(function() { 
    if ($(this).scrollTop() < 100 || $(this).scrollTop() > $(document).height() - $(window).height() - 100) { 
     $('.scrollToTop').fadeOut(); 
    } else { 
     $('.scrollToTop').fadeIn(); 
    } 
}); 

Working example