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

【问题标题】：Mobile App Anchor Links Jump Beneath Fixed Header移动应用锚链接跳转到固定标题下方
【发布时间】：2017-08-05 05:10:21
【问题描述】：

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

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

【问题讨论】：

标签： css phonegap-build

【解决方案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;
}

【讨论】：