jQuery scrollTop анимация не работает, как ожидалось

Question

Я использую событие scrollTo, чтобы сфокусировать элемент, который добавляется в элемент "ul" в качестве окончательного.

проблема в том, что он работает до 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)

})

Live Demo

Заранее спасибо.

Answer 1

Хитрость заключается в том, чтобы оживить #containerscrollTop собственность от:
scrollHeight-height:

LIVE DEMO

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);

});