Make The Scrollbar Fixed To Bottom Even While Appending Content To It

For better understanding I am trying to implement chatbox with smooth transition of previous (upper) chat messages. Here is the http://jsfiddle.net/eEEGE/ When I click 'Add' I want

Solution 1:

    $(document).ready(function(){
        // set the default scroll bar to bottom of chat box
        $(".chat-list").scrollTop($(".chat-list")[0].scrollHeight);
        $("button").click(function(){
            $('.chat-list li:last-child').append('10<br/>11<br/>12');
// Do a callback for show()
            $('.chat-list li:last-child').show('slow', function() {
             $(".chat-list").scrollTop($(".chat-list")[0].scrollHeight);
            });        
        });
    });

Do a callback to show() which will scrollTop() to the $('.chat-list')[0].scrollHeight.

If you want to have an animation then just animate scrollTop property:

$(".chat-list").animate({
    scrollTop: $(".chat-list")[0].scrollHeight
 },'slow');