移动应用程序锚链接跳转固定 Header

Question

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

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

Answer 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;
}

移动应用程序锚链接跳转固定 Header

Mobile App Anchor Links Jump Beneath Fixed Header

css

phonegap-build