ajaxが成功したときにdivをスクロールする方法は？

Question

私はチャットページを開発しています。私はメッセージを送信してチャットを表示するためにajaxを使用しています。メッセージが送信されたときにdivを下にスクロールしたい。

これは

<div id="messages"> 
<div> 
<img src=""> 
<label>Sender name</label> 
<p>message</p> 
</div> 
</div> 

私のdiv要素であるこの私のアヤックスである

$("#btn_post").click(function(e){ //send message button id 
     $('#ajax_loader').show(); 
     $.ajax({ 
      url:'messages/insert_group_messages', 
      type: "POST", 
      data: $('#frmGroupMessage').serialize(), 
      dataType: "text", 
      success: function(){   
       $('#messages').load('group_name/new_messages/'+$('#group_id').val()).fadeIn("slow"); 
       $('#messages').scrollTop($('#messages')[0].scrollHeight); // i tried this to scroll down but its not working. 
       $('#ajax_loader').hide(); 
      }, 
      error:function (xhr, ajaxOptions, thrownError){ 
       alert(thrownError); 
      } 
     }); 
     e.preventDefault(); 
    }); 

メッセージを挿入して示すが、その、新しいメッセージを表示するためにスクロールダウンされていません。 誰でも私を助けることができます。

Answer 1

は、以下のことを試してみてください。

$("html,#messages").animate({ scrollTop:$('#messages').prop("scrollHeight"))}, "slow"); 

それとも

$('#messages').load('group_name/new_messages/'+$('#group_id').val()).fadeIn("slow",function(){ 
    $("html,#messages").animate({ scrollTop:$('#messages').prop("scrollHeight"))}, "slow"); 
});