動的に生成されたdivの下から下に自動的にスクロール

Question

私はこの作業を行う方法に関するアイディアを使い果たしています。コードは：

$('#inboxArea').on('click', '.readMessage', function(){ 
var tix_id = $(this).data('id'); 
var tix_sub = $(this).data('sub'); 
var tix_date = $(this).data('date'); 

$.ajax({ 
    type: 'GET', 
    url: 'user/messages/'+tix_id+'/'+tix_sub+'/'+tix_date, 
    success: function(data){ 
     $('#inboxArea').html(data); 
    } 
}); 
$('#msgScroll').animate({ scrollTop: $('#msgScroll')[0].scrollHeight}, 500); 

}）です。

.readMessageをクリックすると、一連のdivをajax経由で#inboxAreaに設定するはずです。私は、#msgScrollという名前のdivが自動的に後にスクロールするようにしたいと思います。問題は、#msgScrollは、この機能を使用して#inboxAreaに挿入される予定の一部です。

これは助けてに挿入されていて、#msgScrollがそこにあることに気付いています。 msgScrollとして

<button id="msgBack">Back</button> 
    <h3>Inbox</h3> 
    <div class="panel-group"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <div class="row"> 
        <div class="col-lg-9">'.$sub.'</div> 
        <div class="col-lg-3">'.$date.'</div> 
       </div> 
      </div> 
      <div class="panel-body scroll" id="msgScroll"> 
       <div id="msgBody">'; 
    foreach($messages as $message){ 
       echo ' 
        <p>From: '.$message->name.'</p> 
        <p>Message: '.$message->message.'</p> 
        <hr>'; 
    } 
      echo' 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <textarea class="form-control" rows="4" id="msgReply" placeholder="Reply..." name="message" required></textarea> 
    </div> 
    <button id="msgSendReply" data-tid="'.$id.'">Send Reply</button> 

Answer 1

完璧に働いて成功コールバックハンドラ内animate()

success: function(data) { 
    $('#inboxArea').html(data); 
    $('#msgScroll').animate({ 
     scrollTop: $('#msgScroll')[0].scrollHeight 
    }, 500); 
}