我正在尝试实现一个浮动在页面右下角的“go to top”按钮.我可以使用以下代码执行此操作,但我不希望此按钮进入我的页面的页脚.当用户将页面向下滚动到页面底部时,如何阻止它进入页脚并停留在页眉顶部？
CSS
#to-top {
position: fixed;
bottom: 10px;
right: 10px;
width: 100px;
padding: 5px;
border: 1px solid #ccc;
background: #f7f7f7;
color: #333;
text-align: center;
cursor: pointer;
display: none;
}
JavaScript的
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#to-top').fadeIn();
} else {
$('#to-top').fadeOut();
}
});
$('#to-top').click(function() {
$('body,html').animate({scrollTop:0},"fast");
});
HTML
最佳答案
事实证明,解决方案比我想象的要复杂得多.这是我的解决方案.
它使用此function来检查屏幕上是否显示页脚.如果是,则将按钮位置设置为div：absolute.否则,它使用position：fixed.
function isVisible(elment) {
var vpH = $(window).height(),// Viewport Height
st = $(window).scrollTop(),// Scroll Top
y = $(elment).offset().top;
return y <= (vpH + st);
}
$(window).scroll(function() {
if($(this).scrollTop() == 0) {
$('#to-top').fadeOut();
} else if (isVisible($('footer'))) {
$('#to-top').css('position','absolute');
} else {
$('#to-top').css('position','fixed');
$('#to-top').fadeIn();
}
});
原文链接：https://www.f2er.com/css/427160.html