上部に固定メニューがある場合にページの途中にジャンプする方法

ページジャンプの方法

ページ内の特定の場所に飛ぶ方法は昔は a タグの name 属性を使っていたが，今は id で飛ぶ方法をとることが多い．

つまり，以前は

<a href="#jump">ジャンプ！</a>
....
<a name="jump">ジャンプ先です。</a>

今は

<a href="#jump">ジャンプ！</a>
....
<h2 id="jump" id="i-2" class="anchor">ジャンプ先</h2>

と書けばよい．

上部固定メニューの場合は工夫が必要

ただし，このページのように上部に固定のメニューが存在する場合，上記のように書くだけではメニューに隠れてしまう．
そこで，その分だけずらす必要がある．
また，h2 などの id を使ってもよいが，それだと h2 に様々なスタイルが定義されている場合に干渉する可能性もある．
従って，汎用的に使いたい場合には

<a href="#kakkiteki">画期的な商品はここをクリック！</a>
....
<span id="kakkiteki" class="anchor"> </span>
<h2 id="i-4" class="anchor">画期的な商品</h2>

.anchor {
    padding-top: 140px; /* メニューの縦の長さ */
    margin-top: -140px;
    height: 0;
}

のように書くとよい．

見出しに装飾がしてあると難易度が高くなる

見出しに装飾をしてなければ，上の解説通りで大丈夫だが，装飾をしている場合は一筋縄ではいかない．このサイトもいろいろ試して動作するようにしている．