锚点链接必须用id属性，目标元素需设唯一id，链接href="#id"指向；id值禁用空格、中文及#.:等符号；若点击无滚动，检查id是否存在、是否被CSS定位干扰或JS延迟渲染；平滑滚动用html{scroll-behavior:smooth}或scrollIntoView({behavior:"smooth"})。
锚点链接怎么写才有效
必须用 id，不能只靠 name。现代浏览器（包括所有主流版本）已完全弃用 a name="xxx" 这种老写法，写了也不触发跳转。
正确做法是：目标位置的元素（比如标题、段落、空 div）必须带 id 属性，且值唯一；链接用 href="#xxx" 指向它。
<h2 id="section2">第二部分</h2><a href="#section2">跳到第二部分</a>
注意：id 值不能含空格、中文或特殊符号（如 #、.、:），否则链接会失效或行为异常。
点击后页面没滚动？检查这几点
常见现象是链接点了，URL 地址栏变了（出现 #xxx），但页面纹丝不动——大概率是目标 id 找不到，或被 CSS 干扰了定位。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，用
document.getElementById("xxx")手动查一下，返回null就说明id拼错了、重复了，或者还没加载出来 - 目标元素如果用了
position: absolute或transform，可能脱离文档流，导致滚动锚点“看不见”它；加个scroll-margin-top调整偏移更稳妥 - 页面有 JS 动态渲染内容（比如 React/Vue 组件），锚点元素可能在链接点击时尚未挂载，得等 DOM 更新后再触发
scrollIntoView
想让锚点滚动更顺滑，不是加 target="_blank"
target="_blank" 和锚点毫无关系，那是新开窗口用的，加了反而破坏内跳逻辑。
要平滑滚动，只改 CSS 就行：
- 全局生效：
html { scroll-behavior: smooth; } - 只对某个链接生效（需配合 JS）：
document.getElementById("xxx").scrollIntoView({ behavior: "smooth" });
注意：scroll-behavior: smooth 在 Safari 旧版本（
单页应用（SPA）里锚点失效怎么办
Vue Router、React Router 这类路由库默认会拦截 # 链接，把 #section2 当成路由路径处理，而不是原生锚点跳转。
- Vue Router：启用
scrollBehavior配置，并确保router-link的to是对象形式，例如{ hash: "#section2" } - React Router v6：不用
Link，直接用原生a标签（<a href="#section2"></a>），并确保没被BrowserRouter的basename或重写规则覆盖 - 通用兜底：监听
hashchange事件，手动调用scrollIntoView
最常被漏掉的是：SPA 加载完后，初始 URL 带 #xxx，但页面没自动滚过去——这需要在组件挂载时读取 window.location.hash 并主动滚动，不是写个链接就完事。
