how to auto-scroll vertical scroll bar in jquery
<p>I'm trying to create a chat box using tables, I'm using the jScrollPane jQuery plugin to customize the look of the scrollbar, how do I automatically scroll the vertical scrollbar down every time a new  table row is added into the table.</p>

<pre><code>&lt;link type="text/css" href="externals/jScrollPane/style/jquery.jscrollpane.css" rel="stylesheet" media="all" /&gt;
    &lt;style&gt;
    #scroller{
        width: 500px;
        height: 100px;
        margin: 0 auto;
        overflow: auto;
    }
    &lt;/style&gt;

    &lt;script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script  src="externals/jScrollPane/script/jquery.mousewheel.js"&gt;&lt;/script&gt;
    &lt;script  src="externals/jScrollPane/script/jquery.jscrollpane.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    $(function(){
        $(document).keydown(function(e){
            if(e.keyCode == 13){
                var tr = $('&lt;tr&gt;').appendTo('#tbl');
                var td = $('&lt;td&gt;').text('zup yo!').appendTo(tr);
            }
        });
        $('#scroller').jScrollPane(
            {
                autoReinitialise: true
            }
        );
    });
    &lt;/script&gt;
    &lt;div id="scroller"&gt;
    &lt;p&gt;
        &lt;table id="tbl"&gt;&lt;/table&gt;
    &lt;/p&gt;
    &lt;/div&gt;
</code></pre>
