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

});