移动应用锚链接跳转到固定标题下方

Posted 2023-03-07

【中文标题】移动应用锚链接跳转到固定标题下方

【英文标题】：Mobile App Anchor Links Jump Beneath Fixed Header

【发布时间】：2017-08-05 05:10:21

【问题描述】：

我创建了锚链接，以便使用固定标题/固定横幅轻松导航我的一个移动页面；但是，每次我单击锚链接时，它都会比我预期的跳得更远，锚的开始部分会滑到标题下方（看不见）。当我单击它们时，我无法弄清楚如何解决在固定标题下方跳转的锚链接。

我在PixelFlips.com article 中找到了完美解决问题的解决方案。

【参考方案1】：

我在PixelFlips.com article 中找到了解决我的问题的解决方案。

解决方案概述：

HTML 代码：

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

<!-- EMPTY SPAN SECTIONS ABOVE EACH ANCHOR BOOKMARK -->
<span class="anchor" id="section1"></span>
<div class="section"></div>

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

<span class="anchor" id="section3"></span>
<div class="section"></div>

CSS 代码：

.anchor
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;