jquery - jQuery scrollTop アニメーションが期待どおりに機能しない

Question

「ul」要素に追加された要素を最終要素としてフォーカスするために、scrollTo イベントを使用しています。

問題は、20 個の要素まで適切に機能し、後でスクロールが「逆」に移動し、最終的に追加された要素に適切に焦点を合わせていないことです。

誰でもこれを整理するのに役立ちます..?

ここにsmapelコードがあります:

var text = 0;

$('button').on("click", function () {

        text +=1;

    var list = $("<li />", { text : "list : " + text});
    $("ul").append(list);

    $("#container").stop().clearQueue().finish().animate({
        scrollTop : $(list).offset().top
    }, 2000)

})

ライブデモ

前もって感謝します。

Answer 1

#container scrollTopトリックは、次のようにプロパティをアニメーション化することです:
scrollHeight-height:

ライブデモ

var text = 0,
    $cont = $('#container'),
    contH = $cont.outerHeight();

$('button').on("click", function () {   

    var $li = $("<li />", { text: "list : "+ (++text)});
    $("ul").append($li);
    var contSH = $cont[0].scrollHeight;

    $cont.stop().animate({
        scrollTop : contSH - contH
    }, 400);

});