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 =“＃”及其工作！
但是我仍然有一个老问题，即后顶元素滚动到页脚！我会提出任何想法或帮助使封顶在页脚之前停止！ THX !!

更新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。

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

2 个答案: