顯示「返回頂部」鏈接元素使用jQuery當你向下滾動

Question

我想模仿使用jQuery行爲就像你可以在這裏看到： http://edo.webmaster.am/

試想一下，在右下角，向下滾動了一下，你會看到「回到頂部」按鈕。

所以它是不可見的，直到你向下滾動頁面，然後它出現（動畫）。

我怎麼能在jQuery中做到這一點？

Answer 1

您可以監視當前窗口滾動位置並相應地執行操作。如果您希望偏移量在某個點之後（下面的代碼將執行任何滾動，甚至1px），那麼只需在if語句中檢查$(this).scrollTop() > n，其中n是所需的偏移量。

http://jsfiddle.net/robert/fjXSq/

$(window).scroll(function() { 
    if ($(this).scrollTop()) { 
     $('#toTop:hidden').stop(true, true).fadeIn(); 
    } else { 
     $('#toTop').stop(true, true).fadeOut(); 
    } 
}); 

Answer 2

老問題，但我想，既然我實現了一個爲自己給我的兩分錢。我相信最好使用setTimeout來防止多個觸發事件的安全。像這樣：

function showButton() { 


    var button = $('#my-button'), //button that scrolls user to top 
     view = $(window), 
     timeoutKey = -1; 

    $(document).on('scroll', function() { 
     if(timeoutKey) { 
      window.clearTimeout(timeoutKey); 
     } 
     timeoutKey = window.setTimeout(function(){ 

      if (view.scrollTop() < 100) { 
       button.fadeIn(); 
      } 
      else { 
       button.fadeOut(); 
      } 
     }, 100); 
    }); 
} 

$('#my-button').on('click', function(){ 
    $('html, body').stop().animate({ 
     scrollTop: 0 
    }, 500, 'linear'); 
    return false; 
}); 

//call function on document ready 
$(function(){ 
    showButton(); 
});