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