移動應用錨點鏈接跳轉到固定頁眉下方

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