使用 Jquery 以固定位置在 div 中滑动

Question

我有一个"滚动到顶部"按钮，位置固定。我希望这个按钮在你滚动 400px 后从屏幕底部滑入。我可以让它与淡入和淡出一起工作。这是按钮的代码。

<a href="#top" id="scrolltop"><img src="images/upbutton.png" alt="scroll to top"/></a>
#scrolltop {
position:fixed;
height:38px;
width:38px;
background-color:#444;
right:15px;
bottom:15px;
z-index:100;
} 

$(document).scroll(function() {
        var y = $(this).scrollTop();
        if (y > 1000) {
            $('#scrolltop').animate({bottom: 100});
        } else {
            $('#scrolltop').animate({bottom: -100});
        }
});

Answer 1

一个问题是您正在针对 1000 而不是 400 进行测试。

除此之外，scroll事件在滚动时会多次触发。而且由于jquery的animate功能是可堆叠的，因此您可以在每个方向上以多个动画结束，并且在等待每个动画结束时都有很长的延迟。

所以你需要一个更严格的逻辑。

• 不设置动画 如果元素已经在进行动画处理，请使用 :animated jQuery 选择器与 .is() 方法结合使用
• 在尝试动画化之前，还要检查元素是否已位于正确的位置，添加/删除class作为标志来执行此操作
• 此外，缓存重复使用的变量也是一个好主意

所以脚本变成了

var scr = $('#scrolltop');
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 400) {
        if (scr.is('.off') && !scr.is(':animated')) {
            scr.animate({bottom: 100}, function () {
                scr.removeClass('off');
            });
        }
    } else {
        if ((!scr.is('.off')) && (!scr.is(':animated'))) {
            scr.animate({bottom: -100}, function () {
                scr.addClass('off');
            });
        }
    }
});

http://jsfiddle.net/gaby/7eYdB/演示