var messageBody = document.querySelector('#messageBody');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;

如果我没理解错你想要什么的话，这样的东西应该能达到你的目的。
将getElementById()中的messageBody替换为您的聊天消息容器ID。

var chatHistory = document.getElementById("messageBody");
chatHistory.scrollTop = chatHistory.scrollHeight;

这将把消息容器滚动到底部。因为滚动位置是以像素而不是百分比记录的，所以默认情况下，当你向容器中添加更多元素时，滚动位置不会改变。
在聊天消息容器中添加新消息后执行此操作。

假设你的html代码是这样的。

• • 超文本标记语言**

<div id="parentDiv">
  <div class="people">1</div>
  <div class="people">2</div>
  <div class="people">3</div>
  <div class="people">4</div>
  <div class="people">5</div>
  <div class="people">6</div>
  <div class="people">7</div>
  <div class="people">8</div>
  <div class="people">9</div>
</div>

然后把你的js像这样包起来

• • 苏丹**

var objDiv = document.getElementById("parentDiv");
objDiv.scrollTop = objDiv.scrollHeight;

DEMO

给你。跟着这个概念走。

$('#messages').scrollTop($('#messages')[0].scrollHeight);

#chatbox-history {
  overflow: none;
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
}
#messages {
  overflow: auto;
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 200px;
}
#messages div {
  border: 1px solid #e2e4e3;
  margin: 5px;
  padding: 10px;
  background: #fafafa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox-history">
  <div id="messages">
    <div>asdjf ;asd</div>
    <div>ajsd fa ;skd f;s</div>
    <div>asdjf ;akjs d;lf a;lksd fj</div>
    <div>ajsd fkaj s;dlf a;ljsdl;fkja;lsd f; asd</div>
    <div>Wassup?</div>
  </div>
</div>

那就是：messageBody.lastChild.scrollIntoView();//用于初始滚动到底部位置。
p.s.：页面加载后，消息处理程序应该在消息更新时调用此命令。

现在已经是2023了，你现在可以简单地使用Element.scrollIntoView()了！检查MDN documentation。

var messageBody = document.querySelector('#messageBody');
messageBody.scrollIntoView();