页面刷新后如何让聊天滚动条默认定位到底部？

嘿，这个需求太常见了！我之前做聊天功能的时候也踩过类似的坑，跟你分享几个肯定能生效的办法：

方法一：原生JavaScript（最稳妥，不依赖jQuery） #

核心思路是：等页面DOM和所有内容都渲染完成后，把聊天容器的滚动条位置设置为容器的总滚动高度。

你可以把这段代码放在</body>标签的最后面（或者用DOM加载完成事件包裹）：

// 获取聊天日志容器
const chatLogs = document.querySelector('.chatlogs');
// 滚到底部
chatLogs.scrollTop = chatLogs.scrollHeight;

如果聊天内容是异步加载的（比如从后端拉取历史消息），一定要确保这段代码在内容加载完成后执行，比如放在接口请求的回调函数里。

方法二：jQuery正确写法（如果你还是想用jQuery） #

你之前用jQuery没成功，大概率是时机不对或者写法有问题。试试这个：

$(document).ready(function() {
  // 等待DOM完全就绪
  const $chatLogs = $('.chatlogs');
  $chatLogs.scrollTop($chatLogs[0].scrollHeight);
});

注意这里要取$chatLogs[0].scrollHeight——因为jQuery对象本身没有scrollHeight属性，需要访问对应的原生DOM元素才能拿到容器的总滚动高度。

额外优化：监听内容变化自动滚动 #

如果聊天过程中会不断新增消息，还可以监听容器的内容变化，实现自动滚到底部：

// 原生JS监听DOM变化
const chatLogs = document.querySelector('.chatlogs');
const observer = new MutationObserver(() => {
  chatLogs.scrollTop = chatLogs.scrollHeight;
});
observer.observe(chatLogs, { childList: true });

这样不管是刷新页面还是新增消息，滚动条都会自动定位到底部啦～

内容的提问来源于stack exchange，提问作者Yoset GA