javascript - 相对于当前位置滚动Jquery

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

但是，您遇到了另一个问题： when scrollTop(x)is calledx是绝对值，而不是相对值。调用与调用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);
});