scroll-behavior: smooth 必须写在 html 元素上才对锚点跳转生效；body 或 div 上无效，且需配合 href/id 一致、目标可见、scroll-margin-top 避遮挡、js 调用显式传 behavior: 'smooth' 及移动端降级处理。
scroll-smooth 类根本不存在，直接写 class="scroll-smooth" 不会生效——Tailwind 官方从未提供该工具类，浏览器也完全不识别。真正起效的只有一行原生 CSS：html { scroll-behavior: smooth; }。
为什么加在 body 或 div 上无效
浏览器真正的根滚动容器是 html 元素，不是 body。写成 body { scroll-behavior: smooth; } 在 Safari（尤其是 ≤15.4）和多数移动端 WebView 中静默失效；加在普通 div 上则只影响其内部 scrollIntoView()，与锚点跳转无关。
- 检查是否生效：打开开发者工具 → 选中
html元素 → 查看 Computed 样式中scroll-behavior是否为smooth - 某些 CSS 重置（如 Normalize.css）可能把
html的overflow设为visible或覆盖默认高度，可显式补一句html { overflow: auto; } - 若页面用了
height: 100vh; overflow: hidden;，html就不再可滚动，该属性直接被忽略
href="#id 点击后还是“咔”一下跳过去？先查这四点
90% 的“不生效”不是 CSS 问题，而是 DOM 或触发链断了：
-
href和目标id必须完全一致：大小写、连字符、空格都区分（href="#Contact"对不上id="contact"） - 目标元素不能是
display: none或尚未挂载（React/Vue 动态区块需等useEffect或mounted后再触发） - 固定定位导航栏会遮挡锚点顶部——用
scroll-margin-top: 72px给目标元素留白（值等于导航栏高度） - Safari 15.4 以下版本不支持，会静默退化为瞬时跳转，不报错也不警告
JavaScript 滚动仍卡顿？behavior: 'smooth' 必须显式传
即使已设 html { scroll-behavior: smooth; }，JS 调用仍不会自动继承该行为：
-
element.scrollIntoView()必须写成：element.scrollIntoView({ behavior: 'smooth', block: 'start' }); -
window.scrollTo()必须写成：window.scrollTo({ top: 300, behavior: 'smooth' });，旧写法window.scrollTo(0, 200)不触发平滑 - 目标元素若在自定义滚动容器内（如
.chat-list），需显式指定root: chatListEl，否则默认滚整个窗口 - Vue/React 动态渲染后立即调用，
offsetTop可能为 0；建议包一层requestAnimationFrame确保 DOM 已更新
最常被忽略的是：移动端（尤其 iOS Safari ≤15.4 和微信 X5 WebView）对 scroll-behavior: smooth 支持极差，必须用 JS 主动调用 + 运行时检测 + 降级兜底。CSS 层面的设置只是桌面端的基础保障，不能当作跨平台解决方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
