移动端锚点平滑跳转需用js的scrollintoview({behavior:'smooth'})替代css scroll-behavior，因ios safari≤15.3不支持该css、微信等webview静默降级，且css仅对原生a标签生效，js改hash或路由变更无效；须检测运行时支持、处理固定导航栏遮挡（scroll-margin-top）、动态渲染延迟及自定义滚动容器适配。
移动端锚点跳转无法靠 scroll-behavior: smooth 单独实现平滑效果——iOS Safari 15.4 之前完全不解析该声明，微信 X5、旧版 Cordova WebView 等多数环境静默降级为瞬时滚动，且它只对原生 a[href="#id"] 点击生效，不响应路由变更或 JS 手动设 location.hash。
为什么加了 html { scroll-behavior: smooth; } 还是硬跳
最常见原因是：样式没写在正确位置，或触发方式根本不在支持范围内。
-
scroll-behavior必须作用于实际滚动容器。整页滚动的容器是html元素，body上写无效（哪怕你看到 body 在动，那也只是渲染层错觉） - 即使写了
html { scroll-behavior: smooth; }，也只对用户点击<a href="#section"></a>生效；用 JS 改location.hash = 'section'或history.pushState()后不会自动滚动 - iOS Safari ≤15.3 直接忽略整条 CSS 规则，不报错、不警告、不动画——开发者工具里 Computed Styles 也看不到
scroll-behavior: smooth - 用户开启系统「减少动画」（
prefers-reduced-motion: reduce），所有主流浏览器都会强制禁用 smooth 行为
如何让锚点跳转真正平滑（兼容 iOS 15.3+、微信、安卓 WebView）
必须放弃纯 CSS 方案，改用 JS 主动控制，并做运行时检测和降级。
- 优先调用
targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' })，它比scroll-behavior更可控，且现代移动端基本支持（iOS Safari ≥15.4、Chrome ≥61、Firefox ≥78） - 确保目标元素已挂载并完成渲染：Vue 中避开
v-if切换后立即调用；React 中避开setState后同步调用；可用requestAnimationFrame延迟一帧 - 若目标在自定义滚动容器内（如
.list { overflow-y: auto; }），必须显式传root: listContainer，否则默认滚window - SPA 路由跳转后要平滑定位，需在路由守卫或
useEffect中手动调用，不能依赖 CSS 属性
怎么检测 behavior: 'smooth' 是否真实生效
不能只查 'scrollBehavior' in document.documentElement.style——这只能判断 CSS 属性是否被识别，无法反映 JS API 是否真正执行平滑逻辑。
- 先确认
typeof Element.prototype.scrollIntoView === 'function' - 创建临时元素插入 DOM，调用
el.scrollIntoView({ behavior: 'smooth' })，监听scroll事件是否在 100ms 内连续触发（平滑滚动会发多次，瞬时滚动只发一次） - 微信 Android 端需初始化 WebView 时调用
webSettings.setSmoothScrollingEnabled(true)；iOS 端无对应 API，只能靠 JS 降级兜底 - 降级方案建议用
scrollTo+requestAnimationFrame实现逐帧逼近，避免卡顿或跳变
固定导航栏遮挡锚点内容怎么办
这不是滚动错了，而是浏览器把目标元素顶部对齐视口顶部，而 position: fixed 导航栏盖住了内容。
- 在目标元素上加
scroll-margin-top: 60px（值等于导航栏高度），浏览器会在平滑滚动结束时自动预留空白 - 该属性只对锚点跳转和
scrollIntoView()生效，对scrollTo()无效 - 若导航栏高度不固定（如响应式折叠），需用 JS 动态更新该值，或改用
scrollIntoView({ block: 'start', behavior: 'smooth' })配合padding-top补偿 - 注意：不要在 JS 里手动减去
offsetTop，会破坏原生滚动行为（如惯性、回弹、scroll事件触发时机）
最常被忽略的是：CSS 的 scroll-behavior 和 JS 的 behavior: 'smooth' 是两套独立机制，前者只管“谁来滚”，后者决定“怎么滚”。一端漏配，效果就断链；尤其在动态渲染、虚拟滚动、WebView 容器等场景下，几乎必然出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
