ブロックの束を含むページを作成しようとしています (通常、ボックスをクリックして展開できる「オーバーフロー: 非表示」テキストが含まれます)。しかし、ボックスをクリックして高さを調整する (すべてのテキストを表示する) ときは、ScrollTop を使用してそのボックスにフォーカスを合わせたいと考えています。ボックスをクリックして高さを拡大すると、ブラウザ ウィンドウ内でボックスが表示されないままになっている場合、奇妙に見えます。
高さの変化をアニメーション化し、ScrollTop の再配置を適切にアニメーション化する jQuery 関数がありますが、非常に途切れ途切れに見えることがよくあります。一貫性がありません。非常にスムーズな場合もあれば、ボックスの高さを調整して突然スクロールする場合もあります。奇妙な動作に加えて、関数が完了した後、マウスを使用して手動でウィンドウを数秒間スクロールできないことです。手動のマウススクロールをブロックしているようです。
小さな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);
});
});
});