锚点链接生效需同时满足DOM存在、CSS定位流正常、路由未拦截三条件；目标必须用合法唯一id，动态内容需确保挂载后滚动，fixed导航需用scroll-margin-top避让，SPA中须绕过路由拦截并手动处理hash。
锚点链接不是“加个 id 再写个 #id”就完事的——它依赖 DOM 存在性、CSS 定位流、路由拦截状态三者协同，任一环节断裂都会静默失效。
锚点目标必须用 id，且唯一可查
现代浏览器只认 id 属性，name 已被废弃（即使部分浏览器兼容，也不应依赖）。目标元素必须已挂载到 DOM 中，否则点击链接后 URL 变了但页面不动，控制台也不报错。
- 用
document.getElementById("faq")在控制台手动验证：返回值不能是null，且只能是一个元素（重复id时浏览器只取第一个） - SPA 场景下（如 React/Vue），若目标由组件动态渲染，需确保在点击前已完成挂载；Vue 可用
this.$nextTick，React 可用useEffect+ref确保元素存在 - 服务端渲染（SSR）首次加载带锚点的 URL（如
example.com/#contact）时，服务端无法滚动，需客户端主动解析location.hash并调用scrollIntoView
href="#xxx" 失效的常见干扰项
链接能点击、URL 能更新，但页面不滚动或滚错位置，大概率不是 JS 问题，而是 CSS 或结构干扰。
-
position: absolute或fixed的目标元素，若其父容器设置了overflow: hidden，会截断滚动行为，导致锚点“消失” - 顶部有
position: fixed导航栏时，锚点定位仍以文档顶部为基准，目标内容会被遮挡；解决方法不是给整个页面加 padding，而是对目标元素设scroll-margin-top: 60px（推荐），或用 JS 手动计算偏移再滚动 - 某些 CSS 重置库（如 Normalize.css）或框架默认设了
html { scroll-behavior: smooth }，但 Safari 旧版本不支持，会直接退化为跳转，无动画也不报错
单页应用（SPA）里别信原生 href="#xxx"
Vue Router、React Router 等默认拦截所有导航行为，包括哈希变化。原生锚点链接基本被吞掉，既不滚动也不触发任何钩子。
- Vue 项目中，改用
router-link+scrollBehavior配置，或手动this.$nextTick(() => el.scrollIntoView()) - React Router v6+ 必须使用
createHashRouter，并确保未全局调用event.preventDefault()；否则#faq会被当成无效 hash 忽略 - 如果 SEO 或外部链接必须保留
#faq形式（比如别人发来的分享链接），要在路由初始化时监听hashchange事件，手动触发滚动
真正麻烦的从来不是怎么写，而是怎么验证它“确实生效了”：每次改完，都要检查 DOM 是否存在、CSS 是否遮挡、路由是否放行、客户端是否补了 SSR 缺失的滚动——四个条件缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
