1

我有这个代码：

        $(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？

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

4

2 回答 2

1

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

代码底部的这一行$('#back-top').)也无所事事。删除它，一切都应该正常。

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

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

于 2013-10-20T03:58:07.273 回答
-1

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

动画在这里并不完美，但这些是你的工作 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。

于 2013-10-20T02:36:39.897 回答