相对于当前位置滚动

Question

我正在尝试使用jquery单击元素时相对于其当前位置滚动div。 但是它必须在3000毫秒后滚动，因此尝试延迟它。 现在，点击后，它会相对于顶部滚动300像素。 如果我再次单击，什么也没发生。

这是到目前为止的代码：

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

感谢您的帮助。

Answer 1

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});

这个小提琴使上述原理起作用。

Answer 2

这不是delay()工作方式。

根据您的情况使用

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

根据有关delay()的文档

只有队列中的后续事件才被延迟； 例如，这不会延迟不使用效果队列的.show（）或.hide（）的无参数形式。

Answer 3

您可以尝试这样的事情...

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