如何在发布新消息时自动向下滚动

Question

我有这个javascript代码：

<script type="text/javascript" language="javascript">

$(document).ready(function() {

$("#messages").load('ajax/chat/chat_load.php');
$("#msg").submit(function() {

    $.post("ajax/chat/chat_post.php", $("#msg").serialize(), function(data){

        $("#messages").append(data);

    });

    return false;
});

});

我在追加后添加了$("#messages").scrollTop($("#messages")[0].scrollHeight) 但是当发布新邮件时，列表不会自动缩小。

这是表格：

<section class="chat-list">
    <ul class="list-group no-radius m-b-none m-t-n-xxs list-group-lg no-border">
       <div id="messages"></div>
         </li>
</ul>
</section>

    <form id="msg" action="" class="">
    <input class="form-control" name="messages" placeholder="Say something" type="text">               
     <button class="btn btn-default" type="submit">SEND</button>
                              </form>

聊天列表样式：

.chat-list {
height: 300px;
overflow-y: scroll;
}