锚点跳转必须用id而非name；scrollIntoView()比原生锚点更可控；单页应用需监听hashchange并手动处理首次加载；移动端Safari兼容性差，需降级处理。
锚点跳转必须用 id，不是 name
HTML5 已废弃 name 属性用于锚点定位（如 <a name="top"></a>），现在唯一可靠的方式是给目标元素设置 id。浏览器通过 URL 中的 #xxx 匹配页面内第一个匹配的 id="xxx" 元素并滚动到它顶部。
-
<h2 id="section2">第二部分</h2>是合法目标，<h2 name="section2">在现代浏览器中基本无效 - 多个元素不能共用同一个
id，否则跳转行为不可预测（通常只定位到第一个） -
id值不能以数字开头（如id="1section"可能触发 CSS 选择器解析问题，虽不影响跳转但建议避免）
scrollIntoView() 比原生锚点更可控
原生 #xxx 跳转会硬性滚动到元素顶部，且无法设置偏移、动画或对齐方式。scrollIntoView() 提供了明确的控制能力，适合需要微调滚动行为的场景。
- 基础用法：
document.getElementById('section3').scrollIntoView();—— 滚动到可见区域顶部 - 带选项：
element.scrollIntoView({ block: 'center', behavior: 'smooth' });—— 居中显示 + 平滑滚动 - 注意兼容性：
behavior: 'smooth'在 IE 完全不支持，Safari 15.4+ 才支持block和inline参数 - 如果目标元素是
position: fixed或被overflow: hidden父容器裁剪，scrollIntoView()可能失效，需确保父级可滚动且未截断
单页应用里 hashchange 事件要手动监听
纯静态 HTML 页面刷新 URL 的 # 部分不会触发页面重载，但也不会自动执行任何逻辑。若需在跳转后做额外操作（比如高亮当前导航项、加载数据），必须监听 hashchange 事件。
- 监听写法：
window.addEventListener('hashchange', () => { console.log(location.hash); }); - 首次进入页面时（URL 已带 hash）
hashchange不会触发，需手动检查location.hash并执行一次初始化逻辑 - Vue/React 等框架通常封装了路由系统，直接用
useRoute()或this.$route.hash更稳妥，不要绕过框架自己监听hashchange - 避免在
hashchange回调里频繁调用scrollIntoView()，可能和浏览器默认锚点滚动冲突，导致“抖动”
移动端 Safari 对 scrollIntoView() 的兼容细节
iOS 15.4 之前，Safari 不支持 scrollIntoView({ block: 'center' })，只认布尔值参数；且当页面有 input 聚焦时，滚动可能被系统键盘遮挡或中断。
立即学习“前端免费学习笔记（深入）”；
- 降级方案：用
element.scrollIntoView(true)（等价于{ block: 'start' }）保证基础可用 - 若需居中，改用
window.scrollTo()手动计算位置：const top = element.offsetTop - window.innerHeight / 2 + element.offsetHeight / 2; - 在
focus后立即调用scrollIntoView()，Safari 可能忽略，建议加setTimeout(..., 0)延迟一帧 - 测试真机，模拟器常表现正常但实际设备出问题
锚点跳转看着简单，但跨浏览器对齐、移动端适配、与输入框/键盘交互、以及和前端框架的协作，每处都容易掉坑。别假设“写了 id 就一定滚得到”。
