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

2019年7月19日 HTML&CSS, ブログ
このエントリーを Google ブックマーク に追加
LINEで送る

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

つまり,以前は

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

今は

<a href="#jump">ジャンプ!</a>
....
<h2 id="jump">ジャンプ先</h2>

と書けばよい.

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

<a href="#kakkiteki">画期的な商品はここをクリック!</a>
....
<span id="kakkiteki" class="anchor">&nbsp;</span>
<h2>画期的な商品</h2>
.anchor {
    padding-top: 140px; /* メニューの縦の長さ */
    margin-top: -140px;
    height: 0;
}

のように書くとよい.

このエントリーを Google ブックマーク に追加
LINEで送る

PageKnowHowBook
Pagetop