当使用 html { overflow: hidden } + body { overflow: scroll } 实现全屏滚动时，浏览器原生的 #top 锚点会失效，因其依赖文档根元素滚动；解决方案是为首页区域显式添加 id="home" 并统一使用语义化 ID 锚点。

当使用 `html { overflow: hidden }` + `body { overflow: scroll }` 实现全屏滚动时，浏览器原生的 `#top` 锚点会失效，因其依赖文档根元素滚动；解决方案是为首页区域显式添加 `id="home"` 并统一使用语义化 id 锚点。

在单页应用（SPA）式作品集中，要求每个

高度严格为 100vh 是常见设计需求，但直接设置 height: 100% 在 html 和 body 上，配合 position: sticky 导航栏时，容易引发滚动行为冲突。你采用的 html { overflow: hidden } / body { overflow: scroll } 是一种经典绕过方案——它让 成为实际滚动容器，而 不再参与滚动，从而确保 position: sticky 在视口顶部持续生效。

然而，这一技巧会破坏 href="#top" 的默认行为。原因在于：
? #top 并非标准 HTML 锚点，而是浏览器历史遗留的“伪锚点”，其行为依赖于 整个文档根（）可滚动；
? 当 html { overflow: hidden } 后， 失去滚动能力，#top 便无法触发任何滚动动作；
? 其他如 #about、#projects 能正常工作，是因为它们指向的是页面中真实存在的、具有 id 属性的元素，且这些元素位于可滚动的

内，浏览器能精准定位。

✅ 正确解法：用显式语义化 ID 替代 #top
将导航中的 home 改为 home，并在首个内容区块（即“首页”

）上添加 id="home"：

<!-- 修改前 -->
<a href="#top">home</a>

<!-- 修改后 -->
<a href="#home">home</a>

<!-- 对应目标区块 -->
<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>

? 补充说明：

• scroll-behavior: smooth 已在 html, body 中声明，因此所有 ID 锚点跳转都会平滑滚动；
• 无需 JavaScript，纯 CSS + HTML 即可实现；
• 所有锚点 ID 应保证全局唯一，避免重复 id="home"；
• 若后续需兼容旧链接或 SEO，可在 顶部添加一个不可见但可聚焦的占位锚点（如
  ），但本方案中直接绑定到可视
  更简洁、语义更清晰。

最终，你的导航逻辑将完全一致、可预测，且符合现代 Web 标准——既满足课程对 100vh 分区的硬性要求，又保障了粘性导航与锚点跳转的双重可用性。