当您离开页面底部 100 像素时，淡出“滚动到顶部”按钮

Question

我正在使用我在网上找到的一个简单的 jquery“滚动到顶部”插件，它运行良好。但是，当我离开页面底部 100 像素时，我想淡出“滚动到顶部”按钮。任何人都可以帮忙吗？这是一个小提琴 - 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

更新

从下面的 cmets 看来，您只希望 div 在滚动距顶部或底部 100 像素时显示，在这种情况下，请尝试以下操作：

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

Working example