锚点跳转必须用id而非name，id值不能含空格、中文或特殊字符，目标元素不可被display:none或visibility:hidden隐藏，跨页需写全路径，平滑滚动需CSS启用scroll-behavior:smooth。

锚点跳转必须用 id，不能用 name

HTML5 已废弃 name 属性做锚点，只认 id。写成 <a href="#top">回到顶部</a> 后，目标元素必须是 <div id="top"></div> 或 <h2 id="top">标题</h2>。若误用 name="top"，点击后页面不会滚动，控制台也无报错，容易卡在“链接点了但没反应”的状态。

href="#xxx" 跳转失败的常见原因

看似语法正确却跳不动，往往出在这些细节上：

• id 值含空格、中文或特殊字符（如 id="第 二 部分"），浏览器会静默忽略；应改用 id="section-two"
• 目标元素被 display: none 或 visibility: hidden 隐藏，锚点仍可定位，但用户看不到；建议用 opacity: 0 + height: 0 等替代方案
• 页面未加载完成就触发跳转（比如 JS 动态插入内容后立刻 location.hash = "#xxx"），需确保 DOM 已就绪
• 使用了 scroll-behavior: smooth 但目标元素高度为 0 或父容器 overflow: hidden，导致滚动被截断

跨页面锚点要写全路径 + #id

从 index.html 跳到 help.html 的 <h3 id="faq"></h3>，href 必须写成 href="help.html#faq"，不能省略文件名。如果漏掉 help.html，浏览器会当成当前页的锚点，结果跳到空白处。

相对路径要严格匹配目录结构：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 同级： href="about.html#contact"
• 子目录： href="docs/manual.html#install"
• 上级： href="../home.html#features"

平滑滚动不是默认行为，需显式启用

原生锚点跳转是瞬时滚动，要加动画得靠 CSS。只需在根元素加一行：

html { scroll-behavior: smooth; }

注意两点：

• 该样式只对 href="#xxx" 和 location.hash 生效，对 JS 的 element.scrollIntoView() 需额外传 { behavior: 'smooth' }
• 部分旧版 Safari（iOS 15.4 之前）不支持 scroll-behavior，可加 JS 回退逻辑，但多数现代项目已无需兼容

锚点功能看着简单，真正落地时最容易栽在 id 命名规则、CSS 隐藏状态干扰和跨页路径拼写上——这些地方没报错，但就是不工作，查起来特别费时间。