scroll-smooth 类不存在，tailwind css 未提供；平滑滚动需通过 html { scroll-behavior: smooth } 启用，且仅对根滚动容器有效，配合 href/id 一致、元素可见、scroll-margin-top 等细节才能可靠生效。
scroll-smooth 类根本不存在，别白加
直接写 class="scroll-smooth" 不会生效——Tailwind CSS 官方从未提供、也未计划支持这个类名。浏览器不认识它，CSS 解析器直接忽略，控制台也不会报错。你看到的“教程”或代码片段，基本都源于对原生 scroll-behavior: smooth 的误传或命名混淆。
真正起作用的是 html { scroll-behavior: smooth }
平滑滚动是浏览器原生能力，必须通过 CSS 声明启用，且**只在根滚动容器上有效**。对整页锚点跳转（href="#section"）而言，唯一可靠的位置是 html 元素：
html {
scroll-behavior: smooth;
}
- 不要设在
body上：旧版 Safari 和部分 Chrome 版本表现不稳定 - 不要设在
div.content等局部容器：那只会让它的scrollIntoView()平滑，和页面级锚点无关 - 如果页面用了
height: 100vh; overflow: hidden或类似布局，html可能失去滚动能力，此时该声明完全失效
点了链接没反应？先查这四件事
90% 的“不生效”不是 CSS 写错了，而是 DOM 或触发链断了：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
href和目标id必须完全一致：大小写、连字符、空格全敏感（href="#Contact"对不上id="contact"） - 目标元素不能是
display: none，也不能尚未挂载（React/Vue 中异步加载区块，得等useEffect或mounted后再跳转） - 固定定位的导航栏会遮住锚点顶部——用
scroll-margin-top: 72px给目标元素留白 - Safari 15.4 以下版本不支持
scroll-behavior: smooth，会静默退化为瞬时跳转
需要 JS 控制时，别绕远路
当你要带偏移、判断可见性、或兼容老浏览器，直接调用原生 API 更可靠：
document.getElementById('section').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
- 即使已设
html { scroll-behavior: smooth }，scrollIntoView仍可覆盖默认行为 - 别手写
window.scrollTo+ 定时器：难维护，Safari 上容易卡顿或失准 -
behavior: 'smooth'和 CSS 的scroll-behavior是同一套底层机制，但前者可控性更强
真正麻烦的从来不是加一行 CSS，而是确保目标元素存在、可滚动、没被遮挡、且在正确的上下文中被调用——这些细节比类名本身重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
