jQuery滚动到DIV问题的底部

Question

我正在尝试在jquery中编写一个简单的聊天框，当页面加载时滚动到底部。 我已经看到了很多不同的方法（大多数都没有做任何事情）

此方法在此处为向下滚动动画，但似乎仅在div的这个高度执行此操作。 因此，页面加载后..向下滚动到div的大约五分之一。

这是我的代码。 任何帮助，将不胜感激

<script>
$(document).ready(function() {


    //Load Previous Chat Messages
    $("#messages").load('/ajax-request?parse=true');


    THIS ONLY SCROLLS A LITTLE BIT
    $("#messages").animate({ scrollTop: $("#messages")[0].scrollHeight}, 1000);

    $("#userArea").submit(function() {

        $.post('/ajax-post?parse=true', $('#userArea').serialize(), function(data) {
            //Append the Newest Post onto the Chat
            $("#messages").append(data);
            //Clear the Input Box
            $('#textBody').val('');
            //Scroll the chat to the bottom when new chat is posted

            THIS ONE WORKS JUST FINE
            $("#messages").scrollTop($("#messages")[0].scrollHeight);

        });

        return false;
    });
});

</script>




<!-- Display -->
<div id="messages" style="overflow:auto;height:150px;width:350px;" >
</div>

<!-- Post -->
<form id="userArea">
    <!-- Message -->
    <input id="textBody" type="text" maxlength="255" name="messages" autocomplete="off"/>
    <!--Submit-->
    <input type="submit" value="Post Message" />
</form>

Answer 1

尝试将动画添加到加载回调函数中，如下所示：

//Load Previous Chat Messages
$("#messages").load('/ajax-request?parse=true', function(){
    // This should fire once the request is fully loaded
    $("#messages").animate({ scrollTop: $("#messages")[0].scrollHeight}, 1000);
});

Answer 2

试试这个http://jsfiddle.net/B8aGv/

 $("html,body").animate({ scrollTop: $("#messages").position().top }, 1000);