锚点跳转至其他页面指定区域时粘性导航栏遮挡内容的修复方案

问题场景 #

首页的服务链接点击后跳转到服务页对应ID的区块，但服务页中高度为50px的粘性导航栏会遮挡目标内容，此前尝试使用scroll-margin但未生效（未将样式应用到目标元素上）。

解决方案 #

方案一：正确应用scroll-margin到目标元素 #

直接给服务页的每个服务区块设置scroll-margin-top，值为导航栏高度加少量缓冲：

/* 针对所有服务区块类设置 */
.service {
  scroll-margin-top: 60px; /* 50px导航栏高度 + 10px缓冲 */
}

/* 或者针对单个ID设置 */
#ser-1, #ser-2, #ser-3, #ser-4, #ser-5 {
  scroll-margin-top: 60px;
}

原理：scroll-margin定义了滚动目标元素与滚动容器边缘的间距，确保元素顶部避开粘性导航栏。

方案二：全局设置scroll-padding（更高效） #

给页面的滚动容器（通常是html或body）设置scroll-padding-top，所有锚点跳转都会自动应用偏移：

html {
  scroll-padding-top: 60px;
}

原理：该属性给滚动容器的内部顶部预留间距，所有锚点定位时都会考虑这个间距，无需逐个设置元素。

方案三：伪元素占位法（兼容旧浏览器） #

若需兼容不支持scroll-margin/scroll-padding的旧浏览器，可使用隐藏占位元素调整锚点位置：

1. 修改服务页的section结构，添加空锚点容器：

<section class="service">
  <div id="ser-1" class="anchor"></div>
  <h2>Service-1</h2>
  <p>Description of Service-1 goes here.</p>
</section>

2. 设置CSS样式：

.anchor {
  display: block;
  height: 60px;
  margin-top: -60px; /* 向上偏移抵消高度，不占用页面空间 */
  visibility: hidden;
}

原理：通过隐藏的占位元素将锚点位置上移，滚动后实际内容会自然出现在导航栏下方。

内容的提问来源于stack exchange，提问作者majan