最直接方式是用a标签href="#xxx"跳转，需目标元素有唯一合法id（字母开头、无空格中文），严格匹配大小写；常见错误为id拼写不一致、重复或动态移除；滚动不平滑可加html{scroll-behavior:smooth}。
用 a 标签跳转到页面内 ID 是最直接的方式
只要目标元素有 id 属性，a 标签的 href 值写成 #xxx 就能定位过去，浏览器原生支持，不需要 JS。
常见错误是 ID 拼写不一致（比如大小写、下划线/短横混用）、ID 重复、或 ID 被动态移除后链接失效。注意：ID 必须全局唯一，且不能以数字开头（如 id="1section" 在部分旧浏览器中可能不生效）。
-
href中的#后面必须严格匹配目标元素的id值，包括大小写 - 目标元素可以是任意标签，不限于
div或h2，比如<p id="contact"></p> - 如果页面 URL 已带查询参数（如
?tab=2），加锚点时应写成?tab=2#faq，顺序不能颠倒
滚动行为不平滑？加 scroll-behavior: smooth
默认跳转是瞬移，体验生硬。CSS 的 scroll-behavior 可一键启用平滑滚动，但只作用于整个文档根元素（html）。
html {
scroll-behavior: smooth;
}
注意：该属性不支持 IE，且在 Safari 15.4 之前需加 -webkit- 前缀；若页面已用 JS 控制滚动（如监听 hashchange），CSS 平滑可能被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 不要写在
body上，无效；必须作用于html元素 - 移动端 Safari 对
scroll-behavior支持较晚，iOS 15.4+ 才稳定支持 - 若需兼容老版本 Safari 或 IE，得用 JS 的
element.scrollIntoView({ behavior: 'smooth' })
a 链接到其他页面的某个 ID 怎么写？
格式是 href="other-page.html#section-id"，路径可以是相对或绝对，但必须确保目标页面确实存在且包含对应 ID。
容易忽略的是：目标页面加载完成前，浏览器可能无法定位（尤其含 JS 渲染内容时）。例如 Vue/React 页面中，ID 元素由组件挂载后才生成，首次访问带锚点的 URL 会跳空。
- 静态 HTML 页面无此问题；SPA 应在路由就绪、DOM 渲染完成后手动调用
scrollIntoView - URL 中的锚点不会触发页面刷新，但会触发
hashchange事件，可借此做响应 - 避免在
href中写错路径，比如漏掉.html后缀导致 404，此时锚点根本不会生效
点击后没滚动？检查是否被 CSS 或 JS 干扰
最常见的干扰源是 position: fixed 头部遮挡、overflow: hidden 父容器截断滚动、或 JS 绑定了 preventDefault() 却没后续处理。
调试时可临时禁用 JS，或在控制台执行 document.getElementById('target-id')?.scrollIntoView() 看是否有效——若有效，说明是 JS 拦截了默认行为；若无效，再查 CSS 或 DOM 是否就位。
- 父级设置了
overflow: hidden或overflow-y: hidden会导致内部锚点失效 - 某些 UI 框架（如 Bootstrap）的 tab 切换会重置 hash，导致锚点丢失
- Chrome DevTools 的 Elements 面板里右键目标元素 → “Scroll into view” 是快速验证定位是否有效的办法
