锚点链接需确保href与id完全一致、id以字母开头、目标元素可见；用scroll-margin-top解决导航栏遮挡；html{scroll-behavior:smooth}实现平滑滚动；动态内容需等待dom更新后再跳转。
能直接用原生 HTML 实现，不需要 JS；但跳转后位置不准、被导航栏遮住、滚动不平滑——这些才是真问题。
怎么写锚点链接才不会 404
链接 href 值必须和目标元素的 id 完全一致，包括大小写、短横线、下划线，不能多空格也不能少字符。
-
@#@#@#@#@#@#@#@#@#@0对应<div id="faq">...</div>，写成FAQ或fa-q都会失效 -
id必须以字母开头，id="1section"在部分旧浏览器里不认，改用id="section1" - 目标元素不能被
display: none或visibility: hidden隐藏，否则浏览器找不到它，跳转会静默失败
为什么点下去内容被顶部导航栏盖住了
浏览器滚动时只认元素在文档流中的原始位置，不考虑 position: fixed 导航栏或 padding-top 的视觉偏移。
- 最稳妥的修复方式是给目标元素加
scroll-margin-top：比如导航栏高 60px，就写h2[id] { scroll-margin-top: 60px; } - 不要用
margin-top: -60px+padding-top: 60px模拟，容易破坏布局流，尤其在响应式场景下出问题 - 避免对
或设置overflow: hidden，这会直接禁用锚点滚动
怎么让跳转变平滑而不是“啪”一下闪过去
一行 CSS 就够：html { scroll-behavior: smooth; }，所有锚点跳转自动生效。
- 这个声明必须写在
元素上（不是），且不能被其他样式覆盖 - 如果页面有 JS 主动调用
scrollIntoView()，它的{ behavior: 'smooth' }参数优先级更高，但 Safari 15.4 之前不支持，需降级为'auto' - 注意：若 URL 已含查询参数（如
index.html?ref=abc），锚点要写在最后：index.html?ref=abc#contact，顺序颠倒会失效
真正容易被忽略的是动态渲染内容——比如用 JS 加载完一段 HTML 后才插入带 id 的元素，此时直接点锚点链接会跳不到，因为目标还没出现。得等 DOM 更新完成再触发滚动，或者改用 scrollIntoView() 手动控制时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
