我的网站上有一个回到顶部的按钮。而且我知道如何通过向下滚动一些像素来显示按钮。
$(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-Top-Button。 这可能吗？或者我必须说按钮应该出现在哪个位置？
答案 0 :(得分：1)
您可以使用此处记录的此技术来检测滚动方向： https://stackoverflow.com/a/4326907/5308409
并且您可以将它与if语句结合使用，该语句检查当前滚动位置是否等于窗口的高度。就像那样：
答案 1 :(得分：0)
我认为这就是你所需要的。 我们跟踪最后一个滚动值，因此我们可以判断它是向上滚动还是向下滚动。
let currentScroll = $(this).scrollTop();
if (currentScroll > scrolled) {...}
然后我们还会检查是否到达了页面的末尾。
if ($(window).scrollTop() + $(window).height() == $(document).height()) {...}
另外，不要忘记更新最后滚动的值。
答案 2 :(得分：0)
检查这个小提琴： 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);
});
我希望这有效。
答案 3 :(得分：-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;
});