HTML页面内跳转本质是浏览器对#id的原生定位，只匹配首个id元素；需用scrollIntoView()补足平滑滚动等缺陷，并注意单页应用中hashchange需手动初始化及避免与原生滚动冲突。
HTML 页面内跳转不是靠“逻辑”驱动的，它本质是浏览器对 #id 的原生定位行为——没有 if/else，不执行 JS，也不触发事件。所谓“逻辑流转”，其实是开发者在锚点机制基础上叠加的控制层，比如滚动偏移、动态加载、状态同步等。
锚点跳转只认 id，name 已失效
现代浏览器（包括 Safari 15.4+、Chrome、Firefox）只通过 URL 中的 #xxx 匹配页面内第一个 id="xxx" 的元素。写成 name="xxx" 或 class="xxx" 都不会触发滚动。
-
id值不能以数字开头（如id="1section"在部分旧环境可能被忽略，建议用id="section-1"） - 多个元素共用同一
id时，跳转只到第一个，行为不可控 - 目标元素必须已存在于 DOM 中；若由 Vue/React 动态渲染，需确保组件挂载完成后再触发跳转
scrollIntoView() 是补足原生锚点的唯一可靠方式
原生锚点跳转硬性滚到顶部、无法避让 fixed header、不支持平滑动画、也不能监听完成时机。要用 scrollIntoView() 替代或增强：
- 基础居中：
element.scrollIntoView({ block: 'center', behavior: 'smooth' }); - Safari 15.3 及更早版本不支持
block参数，降级写法：element.scrollIntoView();（等价于{ block: 'start' }） - 若目标被
overflow: hidden父容器包裹，scrollIntoView()会静默失败，需确保可滚动容器层级正确 - 避免和浏览器默认锚点滚动冲突：跳转前先
history.replaceState(null, '', '#target')清除 hash，再手动 scroll
单页应用里 hashchange 必须手动初始化
URL 带 hash 进入页面（如 /page.html#faq）时，hashchange 事件不会触发——它只响应后续的 hash 变更。必须主动检查并处理：
立即学习“前端免费学习笔记（深入）”；
- 首次加载逻辑要单独写：
if (location.hash) handleHash(location.hash); - 监听写法：
window.addEventListener('hashchange', () => handleHash(location.hash)); - 不要在回调里反复调用
scrollIntoView()，容易和浏览器原生滚动打架，造成视觉抖动 - Vue/React 项目优先用框架路由 API（如
useRoute().hash），别绕过它自己搞 hash 监听
混合跳转（带参数 + 锚点）要注意顺序和编码
URL 中 query 参数和 hash 锚点共存时，必须严格按 ?key=value#section 顺序书写，且 # 后内容**不能 URL 编码**（浏览器会自动解码后匹配 id）。
- 错误写法：
/search?q=js%23html#section1→%23被当作文本，不触发锚点 - 正确写法：
/search?q=js#section1，若参数本身含#，应改用其他分隔符或服务端解析 - 用 JS 拼接时注意：
`/page?ref=${encodeURIComponent(ref)}#${id}`，确保只有?前部分被编码 - 移动端 Safari 在 input 聚焦状态下触发锚点滚动，可能被键盘遮挡——此时需先
blur()再滚动
真正容易被忽略的，是“跳转完成”的定义：原生锚点无回调，scrollIntoView() 的 behavior: 'smooth' 也不提供 Promise，若需执行高亮、统计或动画衔接，得用 setTimeout(() => {}, 100) 或监听 scroll 事件做防抖判断。
