如何在 100% 高度单页布局中同时实现粘性导航栏与可靠锚点跳转
本文详解在强制 section { height: 100vh } 的单页设计中，为何 #top 锚点失效、html { overflow: hidden } 如何干扰浏览器默认滚动行为，并提供纯 CSS/HTML 的兼容性解决方案。
本文详解在强制 `section { height: 100vh }` 的单页设计中，为何 `#top` 锚点失效、`html { overflow: hidden }` 如何干扰浏览器默认滚动行为，并提供纯 css/html 的兼容性解决方案。
在构建全屏高度（height: 100%）的单页作品集时，你很可能遇到了这样一个矛盾：既要让每个 <section> 占满视口高度，又要保持导航栏始终可见（position: sticky），同时还需确保所有锚点链接（如“home”、“about”）精准跳转——但点击 href="#top" 却毫无反应。
问题根源在于 #top 并非标准 DOM 锚点。它是一个历史遗留的“伪锚点”，依赖浏览器对文档起始位置的隐式理解。而当你设置 html { overflow: hidden } 时，实际是将 <html> 元素变成了一个不可滚动的容器，此时浏览器无法再将 #top 解析为“滚动到页面最顶端”，因为 <html> 自身已失去滚动能力；真正的滚动容器变成了 <body>（body { overflow: scroll }）。但 <body> 并不原生支持 #top 这类语义化锚点——它只响应真实存在的、具有 id 属性的元素。
正确解法是：用显式 ID 替代隐式 #top。
将导航中的 <a href="#top">home</a> 改为 <a href="#home">home</a>，并在首个内容区块（即“首页”区域）添加对应 id="home"：
<!-- 导航栏内 --><a href="#home">home</a><a href="#about">about me</a><!-- 其他链接... --><!-- 首屏内容区（原 .hero） --><section class="hero" id="home"> <div class="logo"></div> <div class="tagline"> <h1>crescent devworks</h1> <p>web development tailored to your needs</p> </div></section>
这样，点击“home”时，浏览器会查找 id="home" 的元素，并平滑滚动至其顶部（得益于 scroll-behavior: smooth）。该方案完全符合 HTML 规范，不依赖任何 JS，且与 html { overflow: hidden } / body { overflow: scroll } 的滚动隔离策略完美兼容。
注意事项：
- 确保 id 值全局唯一，且仅含字母、数字、下划线或短横线（避免空格或特殊符号）；
- 不要给 <nav> 或 <header> 添加 id="home"，而应放在首个可视内容 <section> 上——否则可能因 sticky 导航遮挡导致锚点定位偏移；
- 若希望点击“home”后导航栏不遮盖标题，可在 .hero 上添加 scroll-margin-top: 60px（等于导航栏高度），让滚动停止位置自动下移：
.hero { scroll-margin-top: 60px; /* 避免被 sticky nav 覆盖 */}
总结：#top 是便利但不可靠的快捷方式；在现代 CSS 滚动控制（如 overflow: hidden + overflow: scroll 分离）场景下，必须回归语义化、显式的 ID 锚点。这不仅解决了当前问题，更培养了符合 Web 标准的开发习惯——用可预测的结构替代魔法值，才是稳健前端实践的核心。
