モバイルアプリアンカーリンク固定ヘッダーの下に移動

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