javascript - 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);
});