本文介绍两种原生 JavaScript 方式为任意 div 容器添加平滑滚动到底部功能：通过 CSS scroll-behavior: smooth 统一启用，或通过 JS 动态设置 scrollBehavior 属性，配合 scrollTop = scrollHeight 实现流畅、无闪跳的滚动效果。
本文介绍两种原生 javascript 方式为任意 div 容器添加平滑滚动到底部功能：通过 css `scroll-behavior: smooth` 统一启用，或通过 js 动态设置 `scrollbehavior` 属性，配合 `scrolltop = scrollheight` 实现流畅、无闪跳的滚动效果。
在 Web 开发中，聊天窗口、日志面板或实时消息流等场景常需动态追加内容并自动滚动到底部。虽然 element.scrollTop = element.scrollHeight 能快速定位到底部，但默认是瞬时跳跃式滚动，体验生硬。幸运的是，现代浏览器（Chrome 61+、Firefox 63+、Safari 15.4+、Edge 79+）已原生支持平滑滚动行为，无需依赖第三方库。
✅ 方法一：CSS 驱动（推荐，简洁且可复用）
只需为目标容器添加一行 CSS，即可全局启用平滑滚动：
#con-result {
scroll-behavior: smooth;
}随后，原有 JavaScript 逻辑无需任何修改，scrollTop 赋值将自动触发平滑动画：
function updateScroll() {
const objDiv = document.getElementById("con-result");
objDiv.scrollTop = objDiv.scrollHeight;
}⚠️ 注意事项：
- scroll-behavior: smooth 作用于该元素自身及其内部滚动操作（如 scrollTop、scrollIntoView()），不影响父容器或页面整体；
- 必须在首次调用 updateScroll() 之前应用该样式（内联样式、<style> 标签或外部 CSS 均可）；
- 若容器使用 overflow: hidden 或未设置明确高度/max-height，可能导致滚动失效——请确保容器具有可滚动的溢出区域（如 overflow-y: auto）。
✅ 方法二：JavaScript 动态设置（灵活可控）
若需按需启用（例如仅在特定交互时开启平滑效果），可直接通过 JS 设置 scrollBehavior：
function updateScroll() {
const objDiv = document.getElementById("con-result");
// 动态启用平滑滚动（仅本次生效）
objDiv.style.scrollBehavior = "smooth";
objDiv.scrollTop = objDiv.scrollHeight;
// 可选：重置为 auto 避免影响后续非平滑操作
// setTimeout(() => { objDiv.style.scrollBehavior = "auto"; }, 300);
}此方式无需预设 CSS，适合动态创建的容器或条件化滚动场景。但注意：scrollBehavior 是内联样式，会覆盖 CSS 中的同名声明；若需长期保持，建议优先采用方法一。
? 完整示例（含 HTML + JS）
<div id="con-result" style="height: 300px; overflow-y: auto; border: 1px solid #ccc;">
<div>消息 1</div>
<div>消息 2</div>
<!-- 更多内容... -->
</div>
<button onclick="addMessageAndScroll()">添加新消息并滚动到底部</button>
<script>
// ✅ 推荐：全局 CSS 已设置 scroll-behavior: smooth（见上方）
function addMessageAndScroll() {
const container = document.getElementById("con-result");
const msg = document.createElement("div");
msg.textContent = `消息 ${container.children.length + 1}`;
container.appendChild(msg);
// 自动触发平滑滚动到底部
container.scrollTop = container.scrollHeight;
}
</script>? 总结
- 首选 CSS 方案：语义清晰、性能更优、易于维护；
- JS 动态方案：适用于临时性、条件性滚动控制；
- 两者均兼容 scrollTop 操作，无需改写核心逻辑；
- 始终验证容器的 overflow 和尺寸设置，确保滚动机制生效；
- 如需兼容旧版浏览器（IE 或早期移动端），可降级为 requestAnimationFrame 手动实现渐进式滚动，但本文聚焦现代标准方案。
平滑滚动虽小，却是提升用户体验的关键细节——几行代码，让交互更自然、更专业。
