scroll-behavior: smooth 必须写在 html 元素上而非 body；正确写法为 html { scroll-behavior: smooth; }，并配合 scroll-margin-top 解决固定导航栏遮挡问题，且需确保目标元素存在、DOM 已就绪。
scroll-behavior: smooth 必须写在 html 上，不是 body
90% 的“按钮点击后还是硬跳”问题，根源就在这行 CSS 写错位置。浏览器只把 html 当作根滚动容器，body { scroll-behavior: smooth; } 完全无效——DevTools 里能看到样式，但滚动行为没变。
正确写法只有一行，放进全局 CSS 或 <style> 块里：html { scroll-behavior: smooth; }
- 别加
!important，它容易被 UI 框架（如 Ant Design）的重置样式覆盖 - 检查 DevTools 的 Computed 面板，确认
html元素上scroll-behavior确实是smooth且未被覆盖 - 如果页面用了
overflow: hidden或height: 100vh等限制，html可能失去滚动能力，该属性自然失效
按钮触发跳转时，scrollIntoView 必须带 { behavior: 'smooth' }
用 JS 控制按钮跳转（比如 <button onclick="jumpTo('contact')">），不能只调 element.scrollIntoView()——旧写法 el.scrollIntoView(true) 已废弃，不传对象参数默认仍是瞬移。
正确调用：document.getElementById('contact').scrollIntoView({ behavior: 'smooth', block: 'start' });
立即学习“前端免费学习笔记（深入）”；
-
block: 'start'是安全默认值，确保目标顶部对齐视口顶部 - 若页面有固定导航栏，优先用 CSS 的
scroll-margin-top补偿，而不是 JS 里手动减去 offsetTop（后者易受 transform、父级布局影响） - 必须先检查元素是否存在：
const el = document.getElementById('contact'); if (!el) return;，否则动态渲染内容下会静默失败
固定导航栏遮住目标？用 scroll-margin-top，别碰 margin 或 padding
锚点跳转后内容被 position: fixed 导航栏盖住，不是 JS 算错了，是滚动逻辑本身没预留视觉空间。用负 margin 或 padding-top 挤开目标元素，会破坏文档流、影响可访问性、响应式下极易错位。
标准解法：给目标元素加 scroll-margin-top：#contact { scroll-margin-top: 80px; }
- 数值等于导航栏实际高度（含 border/padding），单位支持
px、rem、vh，但不能用百分比 - 选择器推荐用
h2[id]、section[id]或[id^="section-"]，避免污染全局 - 兼容性注意：Chrome 92+、Firefox 97+、Safari 15.4+ 支持；旧版 Safari 可降级用
scroll-padding-top设在html上
动态加载内容下跳转偏移或失效，得等 DOM 就绪再滚动
Vue/React 组件、AJAX 插入区块、IntersectionObserver 触发的内容，点击按钮时目标元素很可能还没挂载。此时 getElementById 返回 null，或 offsetTop 还是旧值，结果停在错误位置甚至无反应。
基础保障：
— Vue 在 mounted 或 nextTick 后执行
— React 在 useEffect(() => {}, []) 里调用
— 原生 JS 可用 requestAnimationFrame(() => scrollToTarget(id))
- 禁用原生锚点行为：按钮里
e.preventDefault()，别让href="#contact"直接触发跳转 - 用户连点多次会并发滚动，需节流，比如用
setTimeout+ 标志位控制 - 若目标属于异步模块（如懒加载章节），得监听模块加载完成事件（customEvent 或 Promise resolve）再滚动
overflow: auto，加了 scroll-behavior: smooth 也没效果。 
