scroll-behavior: smooth 必须写在 html 元素上才生效，因浏览器仅将 html 视为页面级滚动容器，body 上声明该属性会被忽略；需配合 scroll-margin-top 补偿固定导航栏遮挡，并确保目标元素已挂载且 id 合法。
scroll-behavior: smooth 为什么加在 body 上无效
浏览器只把 html 元素当作页面级滚动容器，body 上声明的 scroll-behavior: smooth 完全被忽略——DevTools 里能看到样式，但滚动仍是生硬的。这不是兼容性问题，是规范要求。
必须写成：html { scroll-behavior: smooth; }，且建议放在全局 CSS 最前面，避免被 Ant Design、Tailwind 等框架的 reset 规则覆盖。
- 检查方式：在 DevTools 中选中
html元素 → 查看 Computed 样式 → 确认scroll-behavior值为smooth且未被!important覆盖 - 局部滚动容器（如
<div class="chat-log" style="overflow: auto">）需单独加scroll-behavior: smooth，且必须带overflow属性（auto、scroll或hidden） - 系统启用“减少动画”偏好（
@media (prefers-reduced-motion: reduce)）时，该属性会被浏览器强制禁用，属正常行为，无需修复
锚点跳转后标题被固定导航栏遮住怎么办
这不是 JS 计算偏移错了，是浏览器原生滚动逻辑以视口顶部为基准，而 position: fixed 导航栏会物理覆盖目标元素上半部分。
别用 padding-top 或负 margin-top 挤开目标元素——这破坏文档流、影响可访问性，响应式下极易失效。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：给目标元素加
scroll-margin-top: 64px（数值等于导航栏实际高度，含 border/padding） - 推荐选择器：
h2[id]、section[id]、[id^="section-"]，避免全局污染 - 单位支持
px、rem、vh，但不能用百分比 - 兼容性：Chrome 92+、Firefox 97+、Safari 15.4+；旧版 Safari 可降级用
scroll-padding-top设在html上
动态渲染内容下锚点跳转静默失败或定位偏移
Vue/React 组件、AJAX 懒加载区块、IntersectionObserver 触发的内容插入，都会导致点击锚点时目标元素尚未挂载——document.getElementById("faq") 返回 null，跳转静默失败；或计算了旧 offsetTop，停在错误位置。
- 基础保障：确保跳转触发前，目标元素已存在于 DOM 中。Vue 用
mounted、React 用useEffect(() => {}, []) - 接管跳转逻辑：阻止默认行为，改用
el.scrollIntoView({ behavior: 'smooth', block: 'start' })，比window.scrollTo更可靠 - 防重复触发：用户快速连点多次会引发并发滚动，需节流（如
setTimeout+ 标志位） - 懒加载场景：若目标前有异步插入区块，需先触发加载完成事件，再执行滚动，否则高度突变导致偏移
锚点链接点击后没反应或滚错位置的底层原因
浏览器对 href="#xxx" 极度宽容：哪怕页面里压根没有 id="xxx" 的元素，它也不报错，只是不动。静默失败才是常态。
- 必须确认三件事：
document.getElementById("faq")返回值非null且唯一；id值全小写、无空格、无中文、不以数字开头（如id="api-reference"✅，id="1section"❌）；点击时该元素已在 DOM 中 - 目标元素必须「可渲染且有尺寸」：若被
display: none、visibility: hidden或父级overflow: hidden截断，浏览器可能无法准确定位 - 懒加载图片/视频导致页面高度动态变化：初始渲染高度（如 3000px）与最终高度（如 5000px+）不一致，滚动坐标按旧高度计算，结果“跳不够远”
- Webflow 等平台常见陷阱：用
<form>包裹锚点链接，触发完整页面重载而非原生锚点滚动
scroll-margin-top）无法解决问题。容易被忽略的是 DOM 就绪时机和页面高度稳定性，这两者不解决，CSS 和 JS 优化都只是补丁。 
