在页脚之前停止“返回顶部按钮”

Question

我有这个代码：

        $(function() {
// cache scroll to top button
var b = $('#back-top');
// Hide scroll top button
b.hide();
// FadeIn or FadeOut scroll to top button on scroll
$(window).on('scroll', function(){
    // if you scroll more then 400px then fadein goto top button
    if ($(this).scrollTop() > 500) {
        b.fadeIn();
    // otherwise fadeout button
    } else {
        b.fadeOut();
    }

});
// Animated smooth go to top
b.on('click', function(){
    $('html,body').animate({
        scrollTop: 0
    }, 2000 );
    return false;
});
$('#back-top').)
});

一切都很好，但是我找不到在按钮到达页脚之前停止滚动的解决方案。:( 我希望这里有人能解决我的问题！？ 任何帮助或建议都会非常有帮助！ 谢谢！

更新：

好吧，我来了！！ 我用新代码更新了小提琴：http://jsfiddle.net/q8DUC/6/
我实现了一条线，可以平滑滚动到每个 href="#" 及其工作！
但是我仍然有返回顶部元素滚动到页脚的老问题！我会提出任何想法或帮助使背景在页脚之前停止！谢了！！

26/10/14 更新：

更进一步：http://jsfiddle.net/q8DUC/20/
只是不知道如何避免按钮的跳跃！
有没有办法将按钮粘贴到底部而不是顶部：0？

一如既往地感谢每一个建议或帮助！

Answer 1

在您的小提琴中，您使用的是$(window).load(function ()，而这里您使用的是$(function()。它不适用于前者。

还有这行$('#back-top').) 在你的代码底部什么都不做。删除它，一切都应该正常。

用http://jsfiddle.net/dJfpC/更新小提琴

（我还隐藏了滚动按钮，因此在页面首次加载时它不会淡出）。

Answer 2

这是您要实现的目标的粗略解决方案。

动画在这里并不完美，但这是你的工作 jsfiddle - http://jsfiddle.net/q8DUC/5/

你应该通过以下方式修改你的函数：

$('#backTop').hide();
$(window).scroll(function(){

 var stop = $('#footer').position().top - $(window).scrollTop();

 var bottomofbutton = $('#backTop').position().top + 100;

var bottom = stop - $('#backTop').height() + 'px';
console.log(bottom);
if ($(window).scrollTop() >100 ){
    $('#backTop').fadeIn();
} else {
$('#backTop').fadeOut();
};

if (stop <= bottomofbutton){
    $('#backTop').css('top',bottom);
} else if (stop >= bottomofbutton){

    $('#backTop').css({'bottom': '100px',
                       'top': ''});
}
});

我还重命名了您的#back-top id，因为 jQuery 似乎无法以这种方式使用它。我改用#backTop。