Javascript 当用户点击页面底部时使用Jquery

我一直在为我的网站开发一个滚动到顶部的功能，这部分功能很好。然而，我的问题是，当页脚碰到页面底部时，我有一个固定的div与页脚重叠

这是我正在使用的函数

$(document).scroll(function (e) {
  if (document.body.scrollTop >= 800) {
    $('#beamUp').show(1000);
         } else {
    $('#beamUp').hide(1000);
    return false;
  }  
});

当我点击页面的那一部分并阻止div越过那一部分时，我是否可以检测到。非常感谢您的帮助

---

jshiddle:

只需获得页面的高度，减去所讨论的div的高度以及页脚。。。确保顶部永远不大于该值。。。您还需要一个onresize事件处理程序来重新计算该值

---

看着你的JSFIDLE

在您的滚动侦听器中，我正在检查页面的位置，并适当地调整浮动框的底部位置。我还设置了初始显示：none，因此您不需要在初始脚本中调用.hide（）。此外，调整窗口的大小会产生滚动的效果，因此我更改了这两个事件的侦听器

$(document).on('scroll resize', function (e) {
  var viewHeight = $(window).height();
  var viewTop = $(window).scrollTop();
  var footerTop = $("footer").offset().top;
  var baseline = (viewHeight + viewTop) - footerTop;
  var bu = $("#beamUp").css({bottom: (baseline < 0 ? 0 : baseline) + 'px'});

  if (viewTop >= 50) {
    bu.show(1000);
  } else {
    bu.hide(1000);
  }
});

$（文档）.on（'scroll resize'，函数（e）{
var viewHeight=$（window.height（）；
var viewTop=$（window.scrollTop（）；
var footerTop=$（“footer”）.offset（）.top；
变量基线=（视图高度+视图顶部）-页脚顶部；
var bu=$（“#beamUp”）.css（{底部：（基线<0？0：基线）+px}）；
如果（视图顶部>=50）{
bu.show（1000）；
}否则{
bu.hide（1000）；
}
});

您是否愿意添加JFIDLE来可视化您的问题（并查看您的样式）？谢谢：）给你！：）这项工作？？谢谢，这项工作，但我仍然需要他们能够跳到页面顶部时，他们击中底部。我有很长的页面，滚动起来很痛苦。我不确定我是否明白你想说什么。我可以得到页面的高度，然后减去div…但我应该确保什么样的顶部永远不会更大？我为什么要使用onresize事件？我在调整什么尺寸？好的。。您的页面高度为1000px（从上到下包括页脚），浮动项的高度为100px，页脚的高度为20px。。然后，您不应该将浮动项的顶部位置设置在（（1000-100）-20）。。。调整大小事件是因为使窗口变宽/变窄将改变整个页面的高度。但这是一个从后到上的div，因此它需要位于页面底部，直到碰到页脚为止。我还是不太明白你对我的部门说了些什么。你能举个例子或看些什么吗？我确实在上面发布了一个JSFIDLE，上面有我正在使用的东西。看到了JSFIDLE，刚刚发布了我的编辑，以及我答案中的相关部分。谢谢你的帮助。我已经玩了一段时间了，是的，它在那个小的js fiddle示例中起作用，但是当我把它放到一个很长很长的页面中时，beam me up链接位于页面顶部，不再固定跟随内容，而是位于顶部。关键是让用户跳到页面顶部。这里有一个链接到我正在做的事情