如何製作僅通過滾動顯示的返回頂部按鈕？

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); 
}); 

我希望這個作品。