Javascript 如何使滚动条自动固定到div的底部？

我正在制作一个网络聊天应用程序，我需要一些帮助。我在一个div中添加了一些段落，并将overflow设置为auto。当包含聊天的div的内容已满时，它会创建一个滚动条，但保持在div的顶部。我希望滚动条固定在底部，这样用户就不需要在每次收到消息时滚动。我该怎么办

使用scrollTop属性。看看这个

JavaScript代码

 container.scrollTop = content.getClientRects()[0].height;

HTML文件

<div id="container">
  <div id="content">Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
   </div>
 </div>

你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！

---

以下是有关和使用scrollTop和scrollHeight（并非所有浏览器都可靠）的文档，或者使用内部DIV而不是后者，以便可靠地获得实际的可滚动高度。别忘了扣除容器的高度。

好吧，这似乎是一个廉价的破解，但你可以在底部放置一个空的占位符，然后使用

窗口跳转到它。位置

$('<div>').attr('id','placeholder').appendTo('#content');
window.location.hash = '#placeholder';
$('#placeholder').remove();

$（“”）.attr（'id'，'placeholder'）.appendTo（'content'）；
window.location.hash='#占位符'；
$（“#占位符”）.remove（）；

---

您可以使用jQuery滚动到最后添加的元素

$（“#btn addPara”）。单击（函数（e）{
$（“#容器”）.append（“新消息”
”）；
$（“#容器”）。设置动画({
scrollTop:$（“#容器”）.children（“：last”）.offset（）.top
}, 1000);
});

另一个人问了一个像这样的问题。你可以在这里找到有效的解决方案：

---

使用JS。我很确定这是唯一的办法<代码>document.getElementById（'div'）.scrollTop=document.getElementById（'div'）.scrollHeight

$("#btn-addPara").click(function(e){
  $("#container").append('<p>New message</p>');

  $('#container').animate({
    scrollTop: $("#container").children(':last').offset().top
  }, 1000);
});