Categories
HTML+CSS javascript(jQuery) ホームページ制作・作成

ヘッダー固定でページ内リンク

検索すれば多数ヒットするのですが、自分がわすれないために。

ヘッダーなどをページ上部に固定させた場合、ページ内リンクを設けるとヘッダーの下に隠れてしまう現象。

アンカーがページの上部に移動し、その上に position:fixed; と z-index を指定したことが原因。

なので、ヘッダーの高さの分だけアンカーをずらせばよい。
方法は CSS と jQuery の2通り。

#anchorText{
margin-top:-100px; /* ヘッダーの高さ */
padding-top:100px; /* ヘッダーの高さ */
}

jQuery では、target.offset().top にヘッダーの高さ分を引けばよい。

position = target.offset().top - 100;