Question

我使用jquery-smooth-scroll来控制锚点滚动。滚动后有一个功能/选项来决定行为。我选择在它到达底部锚点后隐藏按钮。然后我实现了一些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();
  }
});

以上是我用来在按钮消失后恢复按钮的代码，但是当手动滚动到底部时它不能再次消失，它只会在我使用按钮到达底部时再次消失 - 有与我的小提琴玩，你会看到我的意思。

Answer 1

在你的小提琴中，你的包裹<div class="reportFormPage">与文件的位置是绝对的。

因此，您的<body>元素在确定其高度时不会将其考虑在内;因此，它的高度值始终为0.因此，你的其他内容是＆＃39;条件永远不会发生。

删除position: absolute; css规则可解决此问题。

Answer 2

试试这个

if ($(window).scrollTop() ==0) {
    $('.saveForm').fadeIn();
  } else if($(window).scrollTop() < $(document).height()) {
    $('.saveForm').fadeOut();
  }
});

与dommmm所说的删除position:absolute一样。

这是工作小提琴https://jsfiddle.net/sd6sh4v6/2/

通过使用no-js fallback，查看您是否喜欢我带给您smoothScroll的更改。

滚动为100％底部时滚动到底部按钮行为

2 个答案: