Make the scrollbar fixed to bottom even while appending content to it
<p>For better understanding I am trying to implement chatbox with smooth transition of previous (upper) chat messages.</p>

<p>Here is the <a href="http://jsfiddle.net/eEEGE/" rel="nofollow">http://jsfiddle.net/eEEGE/</a></p>

<p>When I click "Add" I want all the number 1 - 9 slide up and append 10-12 below it.</p>

<p>Or in other word I want the scrollbar always scrolled fix at bottom.</p>

<p>I know that I can reposition the scrollbar after appending but then I will not able to see sliding animation.</p>

<p>Code Reference</p>

<pre><code>$(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&lt;br/&gt;11&lt;br/&gt;12');
        $('.chat-list li:last-child').show('slow');     
    });
});

&lt;ul class="chat-list"&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
    &lt;li&gt;6&lt;/li&gt;
    &lt;li&gt;7&lt;/li&gt;
    &lt;li&gt;8&lt;/li&gt;
    &lt;li&gt;9&lt;/li&gt;
    &lt;li style="display:none"&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;button&gt;add&lt;/button&gt;

.chat-list{
    height:100px;
    overflow:auto;
}
</code></pre>
