scrollTop与.animate无法正常工作

Question

我有一个Div包含溢出文本，我想通过点击相应的按钮滚动浏览。它设置为向任一方向滚动100个像素。当我使用它时，该函数可以正常工作。不要使用jQuery .animate。

$(function() {
   $( "#upBtn" ).click(function(){
    $('#scroll').scrollTop($('#scroll').scrollTop()-100);
}); 

 $( "#downBtn" ).click(function(){
    $('#scroll').scrollTop($('#scroll').scrollTop()+100);
});

但是一旦我添加.animate，我只能在任一方向点击一次按钮。它不会让我向下滚过前100个像素。

 $("#scroll").animate({ scrollTop: "100px" });

有什么建议吗？ I put together a codepen.

Answer 1

是的，这是正确的行为！

为什么呢？

因为它已经是100px所以它不会滚动得更远。

应该做什么：

您可以获取当前的滚动顶部位置并为其添加100px。如下所示：

 $("#scroll").animate({ scrollTop:  $("#scroll").scrollTop() + 100 });

同样适用于其他方式。