jQuery scrollTop animation not working as like expected

I am using the scrollTo event, to focus the element which is added in the "ul" element as a final one.

the issue is, it's working upto a 20 elements properly, later the scroll moving "reverse" and not even properly focusing the element which is added finally.

any one help me to sort this..?

here is the smapel code :

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

Thanks in Advance.

The trick is to animate the #container scrollTop property by:
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);

});