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) {

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

获取页脚高度+ 30px
根据您的小提琴〜2000px（FOOTER_START）
如果窗口顶部的位置是> 300并且它大于（FOOTER_START）将#back-top bottom属性更改为页脚高度

一旦到达页脚，停止DIV滚动（另一个DIV）

1 个答案: