当滚动为100%底部时,滚动到底部按钮行为
我使用jquery-smooth-scroll来控制锚点滚动。有一个功能/选项可以在滚动后决定行为。我选择隐藏按钮到底部锚点后。然后,当页面底部的滚动不再是100%时,我实现了一些jQuery来将该按钮返回。当滚动为100%底部时,滚动到底部按钮行为
我正在努力做的是确保滚动100%时按钮总是消失。标准的返回顶部工作方式相同,但在我的情况下页面的两端。
请参阅本拨弄我已经把https://jsfiddle.net/k253jvt8/
/* show and hide button*/
$(window).bind("mousewheel DOMMouseScroll scroll", function (e) {
if (document.body.scrollTop == 0) {
$('.saveForm').fadeIn();
//below isnt working to fade away .saveform when scroll is 100% bottom
} else {
$('.saveForm').fadeOut();
}
});
以上是我用带回的按钮,它消失后的代码,但当时不能得到它再次消失的时候手动滚动至底部,当我使用按钮到达底部时,它只会再次消失 - 与我的小提琴一起玩,你会明白我的意思。
在你的小提琴中,你的包装<div class="reportFormPage">
相对于文档是绝对定位的。
因此,您的<body>
元素在确定其高度时没有考虑到它;因此它总是有一个0的高度值。因此,你的'其他'条件永远不会发生。
删除position: absolute;
css规则可以解决此问题。
通过删除绝对滚动不再起作用,并且按钮在页面顶部而不是底部消失 –
基本上,我总是需要按钮保持可见,除非它在页面底部,它需要在底部隐藏。目前我只能在按钮被点击后才能做到这一点。我需要它工作时手动滚动到底部 –
https://jsfiddle.net/bnxzy9kb/确定所以这让我更接近,但需要按钮留在那里所有的时间,除非100%在页面的底部? –
试试这个
if ($(window).scrollTop() ==0) {
$('.saveForm').fadeIn();
} else if($(window).scrollTop() < $(document).height()) {
$('.saveForm').fadeOut();
}
});
与作为dommmm说移除position:absolute
一起。
这里是工作提琴https://jsfiddle.net/sd6sh4v6/2/
看看你是否喜欢我用无JS后备带给您smoothScroll
的变化。
不,这不起作用,平滑滚动不再起作用。当你点击小提琴中的按钮时,它会消失,但不会滚动到底部。 –
我已经更新了我的答案。对于与'smoothScroll'有关的清理造成的不便,我深表歉意。 –
谢谢,不用担心。不幸的是,我需要我使用的平滑滚动和所用类的绝对值 –
即使你的fadeIn()似乎不起作用!它总是可见的,因为我在函数中注释了整个if-else。 –
在按钮被点击并且滚动位于底部之后,淡入功能起作用,一旦你开始向上滚动,它将在 –
中淡入淡出。另外,我只想按钮在底部100%时消失。它应该保持99%的时间,除非滚动条在底部为100% –