页面内跳转需用id标识目标元素、href="#id"链接指向，注意id唯一性、命名规范及大小写敏感；滚动偏移用scroll-margin-top或负margin补偿；平滑滚动加scroll-behavior: smooth。

用 id 和 # 链接实现页面内跳转最直接

HTML 原生支持点击文字跳转到同一页面的某个位置，核心是「锚点」机制：目标位置打上 id 标识，链接用 # 指向它。浏览器会自动滚动到该元素顶部（注意：不是居中，也不是平滑，除非额外加 CSS）。

常见错误是误用 name 属性（已废弃）或把 id 写在 标签里却没写在目标元素上。

• id 必须唯一，且不能以数字开头（如 id="1section" 不合法，应为 id="section1"）
• 链接 href 值必须严格匹配，大小写敏感，空格也不行（href="#contact-us" 对应 id="contact-us"）
• 目标元素可以是任意标签（
  、

  、

  ），不一定要是

  为什么跳转后位置不准？检查 position: sticky/fixed 和 padding-top

  实际开发中常遇到“点下去，目标元素被导航栏遮住”或“滚过头”，根本原因是目标元素上方有固定定位的 header 或设置了 padding-top。浏览器滚动时只认元素的文档流位置，不考虑视觉偏移。

  • 如果顶部有 position: fixed 的导航栏（高度 60px），可在目标元素上加 margin-top: -60px + padding-top: 60px 补偿（负 margin 拉高锚点位置，padding 确保内容不被遮挡）
  • 更现代的做法是用 scroll-margin-top CSS 属性：h2[id] { scroll-margin-top: 60px; }，兼容性较好（Chrome 69+、Firefox 68+、Safari 15.4+）
  • 避免对 html 或 body 设置 overflow: hidden，这会阻止锚点滚动生效

  想让滚动变平滑？加一行 scroll-behavior: smooth

  默认跳转是瞬时滚动，体验生硬。只需在 html 元素上加一个 CSS 声明，整站所有锚点跳转都会变平滑。

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载

  html {
    scroll-behavior: smooth;
  }

  注意：这个属性只作用于通过 # 链接或 Element.scrollIntoView({ behavior: 'smooth' }) 触发的滚动，不影响 JS 手动调用 window.scrollTo()（除非你显式传参）。

  • 不支持 IE，但现代项目基本可放心用
  • 若需兼容旧浏览器，可用 scrollIntoView() + behavior: 'smooth' 手动绑定点击事件，但没必要为简单锚点大动干戈
  • 慎用在长页面中频繁跳转的场景——连续快速点击多个锚点，可能因动画队列导致卡顿

  JavaScript 动态控制跳转时，别漏掉 preventDefault()

  当需要拦截默认跳转行为（比如先做权限判断、再跳转），用 JS 绑定 click 事件时，必须调用 event.preventDefault()，否则浏览器会先执行原生跳转，再运行你的逻辑，造成冲突。

  document.querySelectorAll('a[href^="#"]').forEach(link => {
    link.addEventListener('click', e => {
      e.preventDefault(); // ← 这行不能少
      const targetId = e.target.getAttribute('href').slice(1);
      const el = document.getElementById(targetId);
      if (el) el.scrollIntoView({ behavior: 'smooth' });
    });
  });

  容易忽略的点：如果 href 是空字符串（href="#"）或无效 ID，getElementById 返回 null，直接调用 scrollIntoView 会报错，建议加存在性判断。

  页面内跳转看着简单，但 id 命名规范、CSS 偏移补偿、滚动行为控制这三处，任一环节出问题都会让效果“差一点”。尤其是多端适配时，iOS Safari 对 scroll-margin-top 的支持比安卓 WebView 更稳定，真机测试别省。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！