スクロールだけで表示されるback-to-top-buttonを作るには？

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>

私はTO-トップボタンが欲しい私が上にスクロール場合は、私は私のウェブサイトの下部に達した場合だけ表示されます。 これは可能ですか？または、ボタンをどの位置に表示する必要があるのですか？そのスクリプトにいくつかの小さなadaptionsで

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

あなたの結果を持っています。

<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) {...} 

次に、ページの最後に達したかどうかを確認します。

また、最後にスクロールした値を更新することを忘れないでください。

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

を、私はこの作品を願っています。