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

这fiddle使上述原则发挥作用。

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

相对于当前位置Jquery滚动

3 个答案: