javascript - 到达页脚(另一个 DIV)后停止 DIV 滚动

Question

我有一个“返回顶部”按钮，当用户向下滚动页面时会出现该按钮。
在一些帮助下，我设法在下面的代码中实现了这些功能:向下滚动后的某个点淡入，动画滚动回到顶部并动画滚动到页面的所有 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？？？

一如既往地感谢您的每一个建议或帮助!

Answer 1

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

// 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. 根据您的 fiddle 获取页脚相对于文档的位置 ~2000px (FOOTER_START)
3. 如果窗口顶部的位置 > 300 并且大于 (FOOTER_START) 将 #back-top bottom 属性更改为页脚的高度