自动向下滚动到动态生成的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); 
}