Jquery 当数据动态加载时，是否滚动到底部至div？

我正在尝试制作一个聊天应用程序，当我发送消息时，它工作正常，并保持滚动至底部，但在另一侧，我收到消息，但它不会滚动至收到的最新消息

当我发送消息时，我使用以下查询滚动到底部

<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>

如何自动滚动至最新消息

提前谢谢

编辑

      <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>

---

以下内容将简化您的困境：

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

因此，在Ajax调用中：

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

---

使滚动代码可重用，并在按下enter键和通过ajax更新时调用它。同样，将提交代码与输入的enter键分离意味着可以添加提交按钮，而无需重复回调

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();
        }
    });
}

var chatApp={}；
chatApp.cont=$（'.con1'）[0]；
chatApp.input=$（'.inp'）[0]
chatApp.scrollToEnd=函数（）{
chatApp.cont.scrollTop=chatApp.cont.scrollHeight；
};
chatApp.input.on（'keyup'，函数（e）{
如果（e.keyCode==13）{
chatApp.chatSubmit（）；
}
})
.focus（）；
//使“提交”可重用，以便可以附加“提交”按钮
$（'chat submit'）。在（'click'，chatApp.chatSubmit'）上；
chatApp.chatSubmit=函数（）{
chatApp.cont.append（“”+chatApp.input.val（）+”
）；
chatApp.scrollToEnd（）；
chatApp.input.val（“”）；
}
chatApp.get_messages（）{
$.ajax({
url:'ajax/get_messages.php'，
方法：“GET”，
成功：功能（数据）{
$（'.msg wgt body'）.html（数据）；
chatApp.scrollToEnd（）；
}
});
}

在ajax中插入html后，应该调用scroll。你的html是什么样子的？那么，当你收到消息时，你尝试了什么？@RobertoLinares你在看选项吗？对不起，你说得对，我对

scrollIntoViewOptions

感到困惑。我删除了我的评论。

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

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();
        }
    });
}