検索すれば多数ヒットするのですが、自分がわすれないために。
ヘッダーなどをページ上部に固定させた場合、ページ内リンクを設けるとヘッダーの下に隠れてしまう現象。
アンカーがページの上部に移動し、その上に position:fixed; と z-index を指定したことが原因。
なので、ヘッダーの高さの分だけアンカーをずらせばよい。
方法は CSS と jQuery の2通り。
#anchorText{ margin-top:-100px; /* ヘッダーの高さ */ padding-top:100px; /* ヘッダーの高さ */ }
jQuery では、target.offset().top にヘッダーの高さ分を引けばよい。
position = target.offset().top - 100;