css - 移动应用程序 anchor 链接跳转到固定标题下

Question

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

我在 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;
}