相对于当前位置滚动Jquery

Question

当我使用jquery点击一个元素时，我尝试相对于它的当前位置滚动一个div。但它必须在3000毫秒后滚动，所以尝试延迟它。现在它滚动300px相对于顶部点击后立即。如果我再次点击，什么也不会发生。

这是目前为止的代码：

$('#scroll').click(function(){              
            $('.vluchtelinginfo').delay(3000).scrollTop(+300);
        });

谢谢你的帮助。

Answer 1

这不是delay()的工作方式。

在您的示例中，使用

setTimeout(function() {
    $('.vluchtelinginfo').scrollTop(+300);
});

根据delay()的文档

只延迟队列中的后续事件；例如，这不会延迟.show()或.hide()的无参数形式，它们不使用effects queue。

Answer 2

Brad M关于使用setTimeout的建议是获得你想要的东西的一种方式。scrollTop()不在jQuery提供的效果列表中，因此不会受到delay()的影响，因为delay()只影响效果。

但是，可以使用animate()在滚动之外产生效果，例如，以下内容应使滚动具有动画效果：

$scrollable.animate({scrollTop: x});

既然animate()是一个“效果”，那么它应该受到delay()的影响。所以你可以这样做：

$scrollable.delay(3000).animate({scrollTop: x});

但是，还会遇到另一个问题:当调用scrollTop(x)时，x是绝对值，而不是相对值。调用scrollTop(+300)与调用scrollTop(300)完全相同。在该上下文中，+符号没有特殊含义。如果你想让你的滚动是相对的，那么你需要首先得到之前的scrollTop值，然后加上你想要滚动的相对距离。例如,

$scrollable.delay(3000).animate({scrollTop: $scrollable.scrollTop() + 300});

这个fiddle将上述原则付诸实践。

Answer 3

你可以试试这样的..。

$("#scroll").click(function () {
    setTimeout(function () {
        $(".vluchtelinginfo").css("top", $(".vluchtelinginfo").offset().top + 300);
    }, 3000);
});