javascript - 高さを調整した直後にScrollTopが続くと、jQueryで非常にぎくしゃく/途切れる

Question

ブロックの束を含むページを作成しようとしています (通常、ボックスをクリックして展開できる「オーバーフロー: 非表示」テキストが含まれます)。しかし、ボックスをクリックして高さを調整する (すべてのテキストを表示する) ときは、ScrollTop を使用してそのボックスにフォーカスを合わせたいと考えています。ボックスをクリックして高さを拡大すると、ブラウザ ウィンドウ内でボックスが表示されないままになっている場合、奇妙に見えます。

高さの変化をアニメーション化し、ScrollTop の再配置を適切にアニメーション化する jQuery 関数がありますが、非常に途切れ途切れに見えることがよくあります。一貫性がありません。非常にスムーズな場合もあれば、ボックスの高さを調整して突然スクロールする場合もあります。奇妙な動作に加えて、関数が完了した後、マウスを使用して手動でウィンドウを数秒間スクロールできないことです。手動のマウススクロールをブロックしているようです。

小さなjsfiddleを作成しました（通常、右側のボックス内に配置するテキストはありません）。

jsfiddle

$(document).ready(function() {
  $(".right").click(function() {
      var currentHeight = $(this).height();
      $(this).animate({
      height: (currentHeight == 100 ? 200 : 100)
      }, 400, function() {
      var offset = $(this).offset();
      $('html, body').animate({
          scrollTop: offset.top
      }, 1000);
      });
  });
});