使用航点时，使用溢出为div上的scrollTop设置动画

Question

当用户滚动到网站中的那个点时，我希望有一个带有自动滚动内容的div。

就像JSFiddle

上的这个例子一样

$("#div").animate({ scrollTop: 1000 }, 2000);

通过上面的例子，当页面加载时立即发生滚动。

我的div与滚动内容在我的网站上进一步下降，所以我希望它在点击该航点时自动滚动。 （我已经在我的页面中使用了jquery-waypoints）。

Answer 1

假设您希望在#div点击窗口顶部时发生此滚动动画：

$('#div').waypoint(function(direction) {
  $(this).animate({ scrollTop: 1000 }, 2000);
});

如果值为direction，您可能希望使用"up"参数执行不同的操作。您可能希望使用triggerOnce: true只进行一次动画，然后再进行一次。它取决于你。