Question

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

这个方法在这里动画向下滚动，但它似乎只是这个div的高度。所以，在页面加载之后......它在div的第5个方向上滚动。

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

<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

尝试将animate放入加载回调函数中，如下所示：

//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);

Jquery滚动到DIV问题的底部

2 个答案: