DIV 滚动到达页脚(另一个 DIV）后停止滚动

Stop DIV scrolling once it reaches the footer (another DIV)

本文关键字：DIV 滚动 另一个      更新时间：2023-09-26

我有一个"返回顶部"按钮，当用户向下滚动页面时会出现.
在一些帮助下，我设法在下面的代码中实现了这些功能：向下滚动后在某个时间点淡入，动画滚动回顶部，动画滚动到页面的所有 href="#" 链接。

    $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();
    var target = this.hash,
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 800, 'swing', function () {
        window.location.hash = target;
    });
});
var $win = $(window);
$win.scroll(function () {
    if ($win.scrollTop() > 300) {
        b.fadeIn();
        console.log("fadding in")
    } 
    else {
        b.fadeOut();
    }
  });
});

这是一个工作示例：http://jsfiddle.net/q8DUC/8/

我的问题是按钮滚动到页面的页脚......基本上，"回到顶部"应该在"页脚"DIV上方停止30px。但是我找不到一种方法来实现这一点。我环顾四周，但没有找到任何适用于现有代码的内容。

感谢您的任何帮助或建议！

更新：

更进一步：http://jsfiddle.net/q8DUC/20/
只是不知道我怎样才能避免按钮跳跃！
有没有办法将按钮粘在底部而不是顶部：0???
一如既往地感谢每一个建议或帮助！

我认为您可以获取页脚的位置并将其添加到您的条件中，该条件检查是否应显示按钮：

// dynamically get the position of the footer
var FOOTER_POSITION = someNumber;
// i THINK something like var FOOTER_POSITION = $('#T4').position().top; could work
if (300 < $win.scrollTop() && $win.scrollTop() < FOOTER_POSITION) {

抱歉，我读错了您的问题，因为您对按钮使用固定定位，因此您可以实现以下内容：

  1. 获取页脚的高度 + 30px
  2. 获取页脚相对于文档的位置，基于您的小提琴 ~2000px （FOOTER_START）
  3. 如果窗口顶部的位置> 300 且大于 （FOOTER_START），请将#back-top bottom属性更改为页脚的高度
相关文章：