HTML简历制作怎么做导航栏？模块快速定位方案-html教程-PHP中文网

用锚点跳转+scroll-behavior: smooth即可实现平滑定位，关键在href与id严格匹配、scroll-behavior设于html元素，且需处理可访问性焦点。

html简历制作怎么做导航栏？模块快速定位方案

用锚点跳转 + scroll-behavior: smooth 就能实现模块快速定位，不需要 JS 也能跑通；但“点击导航就滚到对应区块”这事，90% 的人卡在 id 和 href 不匹配、或没设 scroll-behavior 导致生硬跳转。

导航链接必须指向正确 `id`，且目标元素得有该 `id`

HTML 锚点跳转本质是 href="#xxx" 匹配页面内 id="xxx" 的元素。常见错误包括：

href="#about" 写对了，但目标区块写成 <section class="about"></section> —— 缺少 id="about"，跳转失效
用了 id="About"（大写），但链接写 href="#about"（小写）—— 大小写敏感，不匹配
多个区块重复用了同一个 id —— 浏览器只滚动到第一个，后续点击无效
目标元素是空的或高度为 0（比如只有 <div id="contact"></div>）—— 滚动位置不可靠，可能停在顶部下方几像素处

`scroll-behavior: smooth` 必须设在 `html` 元素上

很多人把 scroll-behavior: smooth 加在 body 或 nav 上，结果没效果。它只对根滚动容器生效，也就是 html 元素：

html {
  scroll-behavior: smooth;
}

注意：scroll-behavior 不支持 IE，但 Chrome/Firefox/Safari/Edge 均已稳定支持；如果必须兼容 IE，就得用 JS 的 element.scrollIntoView({ behavior: 'smooth' })。

移动端点击后页面闪一下、滚动错位？检查是否触发了默认行为

导航链接若带 href="#"，点击后会跳到页面顶部，掩盖锚点效果。真实场景中应避免：

超级简历WonderCV

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

下载

别写 href="#"，改用具体锚点，如 href="#skills"
如果某项暂时无对应区块（比如“博客”还没写），不要留空 href，可写 href="javascript:void(0)" 或直接去掉 href 属性，并加 role="button" 保语义
用 JS 做增强时，记得在事件回调里加 event.preventDefault()，否则 href 仍会触发默认跳转

当前模块高亮需要 JS，但逻辑可以极简

纯 HTML 无法感知滚动位置，所以“当前在哪一节”必须靠 JS 判断。不过不需要复杂库，几行就能搞定：

document.addEventListener('DOMContentLoaded', () => {
  const sections = document.querySelectorAll('section[id]');
  const navLinks = document.querySelectorAll('nav a[href^="#"]');
<p>const setActiveSection = () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop - 80; // 减去导航栏高度
const sectionHeight = section.offsetHeight;
if (pageYOffset >= sectionTop && pageYOffset </p><pre class="brush:php;toolbar:false;">navLinks.forEach(link => {
  link.classList.remove('active');
  if (link.getAttribute('href') === `#${current}`) {
    link.classList.add('active');
  }
});

};

window.addEventListener('scroll', setActiveSection); setActiveSection(); // 初始化一次 });

关键点：别用 getBoundingClientRect() 做实时判断，它在滚动中频繁调用易卡顿；用 offsetTop + pageYOffset 更轻量。另外，- 80 是为了避开固定导航栏遮挡，这个值要和你的 nav 实际高度一致。

真正容易被忽略的是：锚点跳转后，焦点不会自动移到目标区块，键盘用户或读屏器可能卡在原地。加一句 element.focus()（配合 tabindex="-1"）才能算完整可访问。