scrollTopが.animateで正しく機能しない

Question

私は、対応するボタンのクリックでスクロールしたいオーバーフローテキストを含むDivを持っています。いずれかの方向に100ピクセルスクロールするように設定されています。この関数は、jQuery .animateを使用しないで使用するとうまく動作します。

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

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

一度、アニメーションを追加すると、いずれかの方向に1回だけボタンをクリックできます。それは私が最初の100ピクセルを超えてスクロールすることはできません。

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

I put together a codepen.

Answer 1

はい、正しい動作です。

なぜですか？

これは既に100pxであるため、それ以上はスクロールしません。あなたは現在のスクロールトップの位置を取得し、それに100pxに追加することができ

：何を行うべきである

。以下のように：

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

他の方法でも同じです。