本文介绍一种无需 JavaScript 的纯 CSS 方案：利用 scroll-margin-top 属性抵消 :target 触发的默认锚点滚动行为，使页面视觉上不跳转，同时完整维持基于 :target 的单页内容切换逻辑。
本文介绍一种无需 javascript 的纯 css 方案：利用 `scroll-margin-top` 属性抵消 `:target` 触发的默认锚点滚动行为，使页面视觉上不跳转，同时完整维持基于 `:target` 的单页内容切换逻辑。
在纯 HTML/CSS 单页应用中，我们常借助 :target 伪类实现“无刷新页面切换”——通过 @#@#@#@#@#@#@#@#@#@0 触发对应 section#section-id 显示/隐藏。但浏览器默认会将目标元素滚动至视口顶部（或尽可能可见位置），这在顶部有大图（如 Hero Section）时会破坏用户体验，造成突兀跳转。
核心解法：scroll-margin-top
CSS 提供了 scroll-margin-top（以及 scroll-margin-* 系列）属性，用于定义元素成为滚动目标时，其“逻辑边界”相对于视口顶部的偏移量。当设为一个足够大的负值（或正值配合布局），可让浏览器“认为”该元素的顶部位于页面最顶端，从而滚动后视觉上保持原位。
✅ 推荐方案（简洁、兼容性好、无 JS）：
/* 对所有可被 target 的 section 统一设置 */
section[id] {
scroll-margin-top: -100vh; /* 关键：向上偏移整个视口高度 */
}
? 原理说明：
scroll-margin-top: -100vh表示“当该元素成为 :target 时，浏览器应将其‘滚动锚点’向上偏移 100vh”。由于页面顶部通常无内容遮挡（或已有固定导航），实际效果是页面几乎不发生可见滚动，或仅微调，视觉上保持稳定。
? 更稳健的写法（适配不同布局）：
/* 若你的导航栏是 fixed 定位（高度 80px），可精准补偿 */
section[id] {
scroll-margin-top: calc(-80px - 1rem); /* 减去导航高度 + 一点余量 */
}
/* 或更通用的“强制锚定到页面顶部”方案（推荐初学者） */
section[id] {
scroll-margin-top: -9999px; /* 超大负值，确保滚动起点远高于可视区 */
}
⚠️ 注意事项：
-
scroll-margin是现代 CSS 属性，兼容性良好（Chrome 69+、Firefox 68+、Safari 15.4+、Edge 79+），IE 不支持（但 IE 已淘汰）； - 不要使用
scroll-behavior: smooth配合此方案，否则可能放大微小滚动感；如需平滑过渡，建议搭配scroll-behavior: auto或在 JS 方案中统一控制； - 此方法不阻止 URL 中 hash 的变更，
:target选择器仍完全生效，你原有的 SCSS 切换逻辑（如#about-section:target { display: block; }）无需任何修改； - 避免滥用极大绝对值（如
-100000px），虽无害，但语义不清；-9999px或-100vh是清晰且可靠的实践值。
✅ 最终整合示例（精简版）：
<header id="nav-section">导航栏</header><section id="hero-section" style="height: 100vh; background: #f0f0f0;">Hero 大图</section><section id="about-section">关于我</section><section id="portfolio-section">作品集</section><footer id="footer-section">页脚</footer><!-- 导航链接（保持原样） --><nav><a href="#about-section">关于我</a> <a href="#portfolio-section">作品集</a> </nav>
/* 1. 默认隐藏所有 section（除必要初始显示项） */
section:not(#nav-section):not(#hero-section):not(#footer-section) {
display: none;
}
/* 2. :target 显示逻辑（你原有逻辑完全保留） */
#about-section:target, #portfolio-section:target {
display: block;
}
/* 3. 【新增】关键：消除滚动跳转 */
section[id] {
scroll-margin-top: -9999px;
}
总结：scroll-margin-top 是目前唯一标准、声明式、零 JS 的解决方案。它不干扰 :target 的 CSS 逻辑，不改变 URL 行为，也不需要监听事件或操作 DOM —— 真正做到了“用 CSS 做 CSS 该做的事”。对于追求轻量、渐进增强与语义化开发的单页场景，这是最佳实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
