HTML锚点跳转是浏览器原生支持的静态导航机制，无需JavaScript；常见失效原因包括id与href不一致、id含非法字符、目标元素未在DOM中；可用scroll-behavior实现平滑滚动，:target伪类高亮目标区域。

HTML锚点跳转本身不“运行”，它只是浏览器原生支持的静态导航机制；只要写法正确、DOM就绪、URL哈希匹配，点击就能跳转——不需要JavaScript参与，也不需要“运行”任何东西。

锚点跳转为什么点不动？常见写法错误

最常踩的坑是 id 和 href 不一致，或 id 值含非法字符（空格、中文、特殊符号）。

• id 必须唯一，且只能以字母开头，后续可跟字母、数字、下划线或短横线（my-section-1 ✅，1-section ❌，我的章节 ❌）
• href 必须以 # 开头，后面紧接目标 id 值，不能多空格、不能带路径（#section2 ✅，##section2 ❌，/#section2 ❌）
• 目标元素必须存在于当前页面 DOM 中，动态插入的内容需确保插入后才触发跳转（否则跳转会失败或滚动到顶部）

如何让锚点跳转更平滑？用 scroll-behavior

默认跳转是瞬时“闪”过去，加一行 CSS 就能变平滑滚动，且兼容性已很好（Chrome 61+、Firefox 68+、Safari 15.4+）。

在 <style> 或 CSS 文件中写：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

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

html {
  scroll-behavior: smooth;
}

注意：scroll-behavior 只对 # 锚点和 scrollIntoView() 生效，不影响 window.scrollTo() 等 JS 滚动调用（除非手动加 behavior: 'smooth'）。

锚点跳转后怎么高亮目标区域？靠 :target 伪类

浏览器识别到 URL 哈希匹配某个 id 时，会自动给该元素添加 :target 状态，无需 JS。

• 例如：访问 page.html#contact，则 <div id="contact"> 元素会匹配 div:target
• 可用来加背景色、边框或偏移（避免被固定头部遮挡）：

  section:target {
    scroll-margin-top: 60px; /* 向上预留 60px 空隙 */
    background-color: #f0f9ff;
  }

真正容易被忽略的是：锚点跳转依赖 URL 哈希同步，如果页面用了前端路由（如 Vue Router、React Router），# 可能被框架接管，原生锚点会失效；此时得用路由的 scrollToHash 或手动 element.scrollIntoView() 补位。