当使用 html { overflow: hidden } + body { overflow: scroll } 实现全屏滚动时，浏览器原生的 #top 锚点会失效，因其依赖文档根元素滚动；解决方案是为首页区域显式添加 id="home" 并统一使用语义化 ID 锚点。
当使用 `html { overflow: hidden }` + `body { overflow: scroll }` 实现全屏滚动时，浏览器原生的 `#top` 锚点会失效，因其依赖文档根元素滚动；解决方案是为首页区域显式添加 `id="home"` 并统一使用语义化 id 锚点。
在单页应用（SPA）式作品集中，要求每个 <section> 高度严格为 100vh 是常见设计需求，但直接设置 height: 100% 在 html 和 body 上，配合 position: sticky 导航栏时，容易引发滚动行为冲突。你采用的 html { overflow: hidden } / body { overflow: scroll } 是一种经典绕过方案——它让 <body> 成为实际滚动容器，而 <html> 不再参与滚动，从而确保 position: sticky 在视口顶部持续生效。
然而，这一技巧会破坏 href="#top" 的默认行为。原因在于：
? #top 并非标准 HTML 锚点，而是浏览器历史遗留的“伪锚点”，其行为依赖于 整个文档根（<html>）可滚动；
? 当 html { overflow: hidden } 后，<html> 失去滚动能力，#top 便无法触发任何滚动动作；
? 其他如 #about、#projects 能正常工作，是因为它们指向的是页面中真实存在的、具有 id 属性的元素，且这些元素位于可滚动的 <body> 内，浏览器能精准定位。
✅ 正确解法：用显式语义化 ID 替代 #top
将导航中的 <a href="#top">home</a> 改为 <a href="#home">home</a>，并在首个内容区块（即“首页” <section class="hero">）上添加 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，可在 <body> 顶部添加一个不可见但可聚焦的占位锚点（如 <div id="home" tabindex="-1"></div>），但本方案中直接绑定到可视 <section> 更简洁、语义更清晰。
最终，你的导航逻辑将完全一致、可预测，且符合现代 Web 标准——既满足课程对 100vh 分区的硬性要求，又保障了粘性导航与锚点跳转的双重可用性。
