纯CSS实现网页内部锚点跳转时上下偏移的示例代码

<div class="header" style="position: fixed; top: 0;"></div>

<ul>
  <li><a href="#section1">Anchor Text</a></li>
  <li><a href="#section2">Anchor Text</a></li>
</ul>

<div class="section" id="section1"></div>
<div class="section" id="section2"></div>

<div class="anchor" id="section1"></div>
<div class="section"></div>
<div class="anchor" id="section2"></div>
<div class="section"></div>

.anchor{
  display: block;
  height: 60px; /*和顶部fix的高度一致*/
  margin-top: -60px; /*和顶部fix的高度一致*/
  visibility: hidden;
}