Auto Scroll bis zum Ende eines dynamisch generierten div

Question

Ich bin irgendwie keine Ideen, wie dies funktioniert. Der Code lautet:

$('#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); 

});

Was passieren soll ist, wenn Sie klicken, es soll eine Reihe von Divs zu #inboxArea über Ajax aufstellen. Ich möchte das div namens #msgScroll automatisch nach unten scrollen. Das Problem ist, #msgScroll ist ein Teil von dem, was mit dieser Funktion zu #inboxArea eingefügt wird.

Wenn es hilft, das ist, was in #inboxArea eingefügt werden soll, beachten Sie, dass #msgScroll ist dort.

<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

Wie msgScroll wird durch die $.ajax() Funktion bevölkern werden, bewegen animate() in den Erfolg Callback-Handler

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