Question

我创建了锚点链接，可以使用固定标题/固定横幅轻松导航我的某个移动页面;但是，每次我点击锚链接时，它都会比我预期的那样向下跳到页面下方，锚点的起始部分在标题下滑动（在视图之外）。当我点击它们时，我无法弄清楚如何解决在固定标题下跳跃的锚链接。

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

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

1 个答案: