本文介绍纯 CSS 方案：通过 scroll-margin-top 属性将锚点目标的滚动定位偏移至视口顶部，从而在不依赖 JavaScript 的前提下，既保持 :target 的样式切换能力，又避免页面意外跳转。
本文介绍纯 css 方案：通过 `scroll-margin-top` 属性将锚点目标的滚动定位偏移至视口顶部，从而在不依赖 javascript 的前提下，既保持 `:target` 的样式切换能力，又避免页面意外跳转。
在单页应用式布局中，利用 :target 伪类配合 display: none/block 实现“伪路由”切换是一种轻量、无 JS 的经典方案。但默认行为会触发浏览器原生滚动——当点击 时，页面会瞬间跳转至对应 的顶部，破坏首屏体验（尤其存在大尺寸 Hero 图时）。
幸运的是，CSS 提供了优雅的解决方案：scroll-margin-top。该属性定义元素成为滚动目标时，其顶部与视口顶部之间的预留距离。通过将其设为足够大的正值（如 100vh），可让浏览器“认为”目标元素的顶部位于视口最上方，从而实现视觉上无位移的锚点激活。
✅ 正确用法如下：
/* 关键：为所有可被 :target 的 section 设置 scroll-margin-top */
section {
display: none;
scroll-margin-top: 100vh; /* 强制滚动定位到视口顶部 */
}
/* 初始可见区域（导航、英雄区、页脚等） */
#nav-section,
#hero-section,
#footer-section,
#portfolio-section,
#contact-section {
display: block;
}
/* 激活特定 section 并隐藏无关内容 */
#about-section:target,
#coding-section:target,
#scs-section:target {
display: block;
}
#about-section:target ~ #portfolio-section,
#about-section:target ~ #contact-section,
/* ...其他隐藏规则保持不变... */
{
display: none;
}
/* 同理处理 portfolio/contact 激活逻辑 */
#portfolio-section:target,
#contact-section:target {
display: block;
}
#portfolio-section:target ~ #about-section,
#contact-section:target ~ #coding-section,
/* ...其他显隐规则... */
{
display: none;
}
? 注意事项与最佳实践：
-
scroll-margin-top: 100vh是通用安全值，适用于绝大多数固定头部/导航场景；若页面有动态高度 Header，可微调为calc(100vh - 80px)（假设 Header 高 80px）。 - 该方案完全兼容
:target逻辑，URL 哈希（如#about-section）仍正常写入，支持浏览器前进/后退、书签直链，且无需修改 HTML 锚点结构（无需改为#about）。 - 不推荐使用极值如
500vh——虽能覆盖所有情况，但可能在窄屏或缩放下引发意外空白；100vh已足够可靠。 - 旧版浏览器（如 IE）不支持
scroll-margin，若需兼容，应降级为 JS 方案（如history.replaceState()+scrollTo(0,0)），但现代项目中可放心使用。
最终效果：点击导航链接，URL 变化、对应区块显示/隐藏，而页面静默响应，无任何跳动——真正实现“SPA 感”的纯 CSS 单页体验。
