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