刷新后自动定位靠浏览器原生行为，需url中#xxx严格匹配页面id="xxx"（大小写、符号、空格均敏感；id不能数字开头、含中文或特殊字符）；目标元素须已存在于dom；fixed导航遮挡用scroll-margin-top修复；spa中需手动scrollintoview；ios safari平滑滚动应显式调用而非依赖css。
刷新后自动定位到页面某处，靠的是浏览器原生行为：只要 URL 里带 #xxx，且页面存在对应 id="xxx" 的元素，就会自动滚动。但实际用起来经常失效——不是代码没写，而是细节没对齐。
URL 中的 #xxx 必须严格匹配目标元素的 id
浏览器不会容错，#Section1 和 id="section1" 就是两个不同锚点；#contact-us 对应的必须是 id="contact-us"，不能是 id="contact_us" 或 id="contact us"。
-
id值不能以数字开头（如id="1section"是无效 HTML5，部分浏览器直接忽略） - 避免中文、空格、全角符号（
id="联系我"或id="contact section"都会失败） - 大小写敏感，
#FAQ≠id="faq" - 目标元素必须在 DOM 中真实存在，且不能是动态插入后未触发重排的节点（SPA 场景下尤其注意）
固定头部遮挡标题？用 scroll-margin-top 修偏移
点击锚点后，目标元素顶部被 position: fixed 导航栏盖住，这是最常见却最容易被忽略的问题。原生锚点跳转不支持设置偏移量，不能靠 JS 覆盖滚动位置来“事后修正”——因为浏览器会在 JS 执行前就完成一次强制滚动。
- CSS 方案最稳：
#[target-id] { scroll-margin-top: 80px; }（值等于导航栏高度） - 不要用
margin-top或padding-top挤开内容，这会破坏布局流 - 该属性兼容性良好（Chrome 69+、Firefox 68+、Safari 15.4+），IE 不支持但 IE 已无实际维护价值
SPA 中 window.location.hash 不触发滚动？手动调 scrollIntoView()
React/Vue 等框架的路由系统通常会拦截 hashchange 事件，并阻止默认滚动行为。此时即使 URL 变了，页面也不会动。
- 监听
hashchange后，主动查找目标元素并调用：document.getElementById(hash.slice(1))?.scrollIntoView({ behavior: 'smooth', block: 'start' }) - 确保元素已挂载：若目标在异步组件中，需等 DOM 渲染完成再执行（可用
requestAnimationFrame或setTimeout(..., 0)微任务延迟） - 不要用
window.scrollTo()计算 offset，scrollIntoView()自动处理 sticky header、flex 容器等复杂布局下的定位偏差
iOS Safari 下平滑滚动失效？别只依赖 scroll-behavior: smooth
CSS 的 scroll-behavior: smooth 在 iOS Safari（尤其是旧版本）中支持不稳定，有时干脆不生效，或滚动卡顿。
- 优先用 JS 显式调用：
element.scrollIntoView({ behavior: 'smooth' })，兼容性更好 - 若需更细粒度控制（比如统一偏移 70px），改用
scrollTo()+getBoundingClientRect()计算位置 - 注意：
scrollIntoView()在某些 flex/grid 容器中可能定位不准，此时回退到scrollTop = target.offsetTop - offset更可靠
真正容易被忽略的，不是“怎么让它动”，而是“为什么它不动”——往往卡在 id 拼写、CSS 层叠顺序、SPA 路由拦截或 iOS 的平滑滚动降级逻辑上。定位问题时，先检查 location.hash 和 document.getElementById(...) 是否能取到有效值，比盲目加 JS 更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
