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

现场演示

提前谢谢。

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