自動向下滾動到動態生成的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它應該通過ajax建立一系列div到#inboxArea。我有點想要名爲#msgScroll的div自動向下滾動。問題是，#msgScroll是使用此功能插入到#inboxArea中的一部分。

如果有幫助，這是什麼應該插入到#inboxArea通知，#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

正如msgScroll將由$.ajax()功能來填充，在成功回調處理

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