Прокрутите вниз до div, когда данные загружаются динамически?

Question

Я пытаюсь сделать чат-приложение, когда я отправляю свое сообщение, он отлично работает и держит прокрутку внизу BUT с другой стороны Получаю сообщение, но он не прокручивает до последнего полученного сообщения!

Я использую следующий запрос для прокрутки вниз, когда я отправить сообщение

<script> 
var $cont = $('.con1'); 
$cont[0].scrollTop = $cont[0].scrollHeight; 

$('.inp').keyup(function(e) { 
    if (e.keyCode == 13) { 
     $cont.append('<p>' + $(this).val() + '</p>'); 
     $cont[0].scrollTop = $cont[0].scrollHeight; 
     $(this).val(''); 
    } 
}) 
.focus(); 

</script> 

И это AJAX-код для получения сообщений из базы данных MySql

function get_messages() { 
     $.ajax({ 
     url: 'ajax/get_messages.php', 
     method: 'GET', 
     success: function(data) { 
      $('.msg-wgt-body').html(data); 
     } 
     }); 
    } 

Как автоматически прокручивать к последнему сообщению

Заранее благодарен!

EDIT

 <div class="msg-wgt-body con1" id="Box"> 
    <table> 
     <?php 
     if (!empty($messages)) { 
     foreach ($messages as $message) { 
      $msg = htmlentities($message['message'], ENT_NOQUOTES); 
      $user_name = ucfirst($message['username']); 
      $sent = date('Y-m-d H:m:s'); 
      echo <<<MSG 
      <tr class="msg-row-container"> 
      <td> 
       <div class="msg-row"> 
       <div class="avatar"></div> 
       <div class="message"> 
        <span class="user-label"><a href="#" style="color: #6D84B4;">{$user_name}</a> <span class="msg-time">{$sent}</span></span><br/>{$msg} 
       </div> 
       </div> 
      </td> 
      </tr> 
     MSG; 
     } 
     } else { 
     echo '<span style="margin-left: 25px;">No chat messages available!</span>'; 
     } 
     ?> 
    </table> 
    </div> 

Answer 1

Следующая бы упростить затруднительное положение:

<div id="top"></div> 
<p>Message 1</p> 
<p>Message 2</p> 
<div id="bottom"></div> 

Затем вы можете прокручивать в верхней или нижней части легко:

$("#bottom").get(0).scrollIntoView(); 

Так что в вашем Ajax звонок:

function get_messages() { 
    $.ajax({ 
    url: 'ajax/get_messages.php', 
    method: 'GET', 
    success: function(data) { 
     $('.msg-wgt-body').html(data); 
     $("#bottom").get(0).scrollIntoView(); 
    } 
    }); 
} 

Answer 2

Сделайте свой код прокрутки повторно используемым и вызовите его, когда нажата клавиша ввода, и когда вы обновляетесь через ajax. В то же время, развязка вашего кода отправки с помощью клавиши ввода ввода означает, что вы можете добавить кнопку отправки без дублирования обратного вызова.

var chatApp = {}; 
chatApp.cont = $('.con1')[0]; 
chatApp.input = $('.inp')[0] 

chatApp.scrollToEnd = function() { 
    chatApp.cont.scrollTop = chatApp.cont.scrollHeight; 
}; 

chatApp.input.on('keyup', function(e) { 
    if (e.keyCode == 13) { 
     chatApp.chatSubmit(); 
    } 
}) 
.focus(); 

// make submit reusable so that you can attach a submit button 
$('.chat-submit').on('click', chatApp.chatSubmit); 

chatApp.chatSubmit = function() { 
    chatApp.cont.append('<p>' + chatApp.input.val() + '</p>'); 
    chatApp.scrollToEnd(); 
    chatApp.input.val(''); 
} 


chatApp.get_messages() { 
    $.ajax({ 
     url: 'ajax/get_messages.php', 
     method: 'GET', 
     success: function(data) { 
      $('.msg-wgt-body').html(data); 
      chatApp.scrollToEnd(); 
     } 
    }); 
}