在强制要求每个 section 高度为 100vh 的单页布局中，通过 html { overflow: hidden } + body { overflow: scroll } 实现粘性导航时，原生 #top 锚点会失效；解决方案是用显式 ID（如 #home）替代 #top，并确保目标元素真实存在且可滚动定位。
在强制要求每个 section 高度为 100vh 的单页布局中，通过 `html { overflow: hidden }` + `body { overflow: scroll }` 实现粘性导航时，原生 `#top` 锚点会失效；解决方案是用显式 id（如 `#home`）替代 `#top`，并确保目标元素真实存在且可滚动定位。
当你为单页作品集设置「每节 100% 高度」这一硬性要求时，常见的做法是将 html 设为 overflow: hidden、body 设为 overflow: scroll——这能让 position: sticky 导航栏始终固定在视口顶部，同时允许页面内容纵向滚动。但该技巧会带来一个隐蔽副作用：浏览器不再识别 #top 这一隐式锚点。
原因在于：#top 并非 HTML 标准规范定义的保留锚点，而是部分浏览器（如 Chrome、Firefox）的历史兼容行为——它默认指向文档最顶端（即 scrollTo(0, 0)）。然而，当 html 被设为 overflow: hidden 后，整个根元素失去了滚动能力，浏览器无法再通过 #top 触发对根容器的滚动定位；而 body 虽然可滚动，但它本身不响应 #top 锚点跳转逻辑。
✅ 正确解法是：将 #top 替换为一个真实存在的、带 id 的目标元素，例如 <section id="home">，并在导航链接中明确指向它：
<!-- 修改前（失效） --> <a href="#top">home</a> <!-- 修改后（生效） --> <a href="#home">home</a>
同时，在 DOM 中为首页区域添加对应 ID：
<!-- HERO section 增加 id="home" -->
<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）位于 body 的滚动流中，且不在 position: sticky/fixed 容器内；
- 所有锚点链接需配合 scroll-behavior: smooth（你已在 html, body 中声明，无需额外操作）；
- 不要给 #home 元素设置 margin-top 或 padding-top 覆盖其定位起点，否则跳转后可能遮挡内容——如有顶部留白需求，建议用 padding-top 配合 scroll-margin-top 修正（例如 .hero { scroll-margin-top: 60px; }，让滚动停止时标题距导航栏 60px）；
- 此方案完全基于纯 CSS/HTML，无需 JavaScript，符合课程约束。
总结来说，#top 是一种“魔法字符串”，依赖浏览器内部实现，在非标准滚动上下文中不可靠；而显式 ID 锚点（如 #home）是 W3C 明确定义的、可预测的 DOM 定位机制——它直接匹配具有对应 id 属性的元素，并由 body 的滚动容器精准执行定位。这是语义清晰、跨浏览器稳定、且易于调试的最佳实践。
