如何制作仅通过滚动显示的返回顶部按钮？

Question

我在我的网站上有一个返回顶部按钮。我知道如何做到这一点，通过滚动一些像素的按钮出现。

$(window).scroll(function() { 
 
    if ($(this).scrollTop()) { 
 
     $('#toTop').fadeIn(); 
 
    } else { 
 
     $('#toTop').fadeOut(); 
 
    } 
 
}); 
 

 
$("#toTop").click(function() { 
 
    $("html, body").animate({scrollTop: 0}, 1000); 
 
});

#toTop { 
 
    padding: 5px 3px; 
 
    background: #000; 
 
    color: #fff; 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 5px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='toTop'>to-top!</div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 

 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 

 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 

 
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
 

 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 
 

 
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>

我想，如果我向上滚动，或者如果我达到我的网站的底部到顶部，按钮才出现。 这可能吗？或者我不得不说在哪个位置按钮应该出现？

Answer 1

您可以使用此技术记录在这里检测滚动方向： https://stackoverflow.com/a/4326907/5308409

，您可以将它与if语句组合起来，该语句检查当前滚动位置是否等于窗口高度。就像这样：

https://stackoverflow.com/a/3898152/5308409

Answer 2

https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

有了一些小adaptions自己的脚本，你有你的结果。

<script> 
// When the user scrolls down 20px from the top of the document, show the button 
window.onscroll = function() {scrollFunction()}; 

var lastScrollTop = 0; 
function scrollFunction() { 
    var st = $(this).scrollTop(); 

    if (st + $(window).height() === $(document).height() || st < lastScrollTop) { 
     document.getElementById("myBtn").style.display = "block"; 
    } else { 
     document.getElementById("myBtn").style.display = "none"; 
    } 

    lastScrollTop = st; 
} 

// When the user clicks on the button, scroll to the top of the document 
function topFunction() { 
    document.body.scrollTop = 0; 
    document.documentElement.scrollTop = 0; 
    lastScrollTop = 0; 
} 
</script> 

来源：
How can I determine the direction of a jQuery scroll event?
Check if a user has scrolled to the bottom

所以把那个在你的脚本

var lastScrollTop = 0; 
$(window).scroll(function() { 
    var st = $(this).scrollTop(); 

    if (st + $(window).height() === $(document).height() || st < lastScrollTop) { 
     $('#toTop').fadeIn(); 
    } else { 
     $('#toTop').fadeOut(); 
    } 
    lastScrollTop = st; 
}); 

$("#toTop").click(function() { 
    $("html, body").animate({scrollTop: 0}, 1000); 
    lastScrollTop = 0; 
}); 

Answer 3

我觉得这是你所需要的。 我们跟踪最后一个滚动值，所以我们可以判断它是向上滚动还是向下滚动。

let currentScroll = $(this).scrollTop(); 
if (currentScroll > scrolled) {...} 

然后我们也检查一下，如果我们到了页面的末尾。

if ($(window).scrollTop() + $(window).height() == $(document).height()) {...}  

此外，不要忘记更新最后滚动的值。

https://jsfiddle.net/25k3g4c3/

Answer 4

检查此琴： http://jsfiddle.net/ManuelDavid325/rncv6038/

var lastScrollPosition = $(window).scrollTop(); 
var _scrollTopMargin = 10; // Save the original value 
var scrollTopMargin = _scrollTopMargin; 
$(window).scroll(function() { 
    // Detect if has scrolled up 
    if($(window).scrollTop() < lastScrollPosition - scrollTopMargin){ 
     $('#toTop').fadeIn(); 
     scrollTopMargin = 0; 
    } else { 
     $('#toTop').fadeOut(); 
     scrollTopMargin = _scrollTopMargin; 
    } 

    // Detect if has reached the bottom 
    if($(window).scrollTop() >= $("body").outerHeight() - $(window).outerHeight()){ 
     $('#toTop').fadeIn(); 
     scrollTopMargin = 0; 
    } 
    lastScrollPosition = $(window).scrollTop(); 
}); 

$("#toTop").click(function() { 
    $("html, body").animate({scrollTop: 0}, 1000); 
}); 

我希望这个作品。