scroll-behavior: smooth 在 HTML 模板中常因样式被重置、锚点元素未渲染、系统“减少运动”偏好启用、误设在 body 而非 html 上，或 JS 未等 DOM 就绪调用滚动方法而静默失效；模板仅输出结构，动画可靠性取决于 DOM 状态、样式优先级与浏览器能力适配。
HTML 模板本身不执行动画，滚动动画必须由 CSS 或 JavaScript 驱动；模板只是结构容器，关键在如何把滚动逻辑嵌入其中并避免常见失效点。
scroll-behavior: smooth 为什么在模板里不生效
直接在 HTML 模板中写 html { scroll-behavior: smooth; } 是最简方案，但常因以下原因静默失败：
- 样式被 reset.css 或框架（如 Bootstrap）覆盖，尤其存在
html { scroll-behavior: auto !important; } - 目标锚点元素是
display: none、visibility: hidden或尚未渲染（如 Vue 的v-if未触发） - 用户系统开启了「减少运动」偏好（
prefers-reduced-motion: reduce），浏览器强制降级为瞬时滚动 - 写了
body { scroll-behavior: smooth; }—— 无效，页面滚动容器是html，不是body
JS 滚动动画在模板中如何安全调用
模板中插入 JS 时，必须确保 DOM 已就绪且目标元素存在，否则 scrollIntoView 或 scrollTo 会静默跳过：
- 不要在
<head>中立即执行document.getElementById('section2').scrollIntoView() - 改用
DOMContentLoaded或将脚本放在</body>前：document.addEventListener('DOMContentLoaded', () => { const target = document.getElementById('section2'); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); - SPA 场景下，路由跳转后目标元素可能异步加载，需监听 DOM 变化或使用
MutationObserver等待元素挂载 - 对
disabled字段包裹的fieldset内元素调用scrollIntoView会失败且无报错，得先检查offsetParent !== null和getComputedStyle(el).display !== 'none'
scroll-timeline 在模板中启用的现实约束
想用 CSS 滚动驱动动画（如视差、渐显）需依赖 @scroll-timeline，但它在模板中极易“看起来写了却没反应”：
立即学习“前端免费学习笔记（深入）”；
- Chrome/Edge 115+ 原生支持，但 Firefox 仅在
about:config启用layout.css.scroll-driven-animations.enabled后支持基础属性 - Safari 完全不解析
@scroll-timeline和animation-timeline，写了等于注释 - 必须显式指定滚动容器（scroller），不能默认用
html；若容器是overflow: hidden或未设高度，时间轴无法建立 - 滚动进度映射依赖容器实际滚动距离，若子内容高度不足导致无法滚动，动画永远卡在 0%
真正容易被忽略的是：模板不是运行环境，它只负责输出初始 HTML。所有滚动动画的可靠性，取决于你是否在模板生成后，准确控制了 DOM 状态、样式优先级和浏览器能力边界——而不是期待“加个 class 就自动动起来”。
