显示“返回顶部”链接元素使用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(); 
});