目次
レスポンシブで固定ヘッダーの高さが可変。アンカースクロールがうまく設定できない。
ヘッダーにposition:fixed;を適用していて固定していると、ページ内スクロールでスルスルーっと移動するときにズレが生じてしまいます。
そんな時はheaderの高さ分、cssで調整します。
cssで実装する方法
cssに下記コードをコピペ
|
1 2 3 4 |
#contents{ margin-top:-100px;/*headerの高さが100pxの場合*/ padding-top:100px; } |
100pxの高さのheaderであることを考慮してスムーズスクロールが可能です。
jQueryで実装する方法（これが確実な方法！！）
ですが、レスポンシブ対応のサイトだったり、ブラウザの幅によってheaderの高さが変化する場合はcssで調整するよりJavaScriptで調整する方法が楽です。
jQueryを読み込んだ後に
jsに下記コードをコピペ
|
1 2 3 4 5 6 7 8 |
var headerHight = $("ここにheaderのclass").outerHeight(); $("a").click(function() { var href = $(this).attr("href"); var target = $(href == "#" || href == "" ? "body" : href); var position = target.offset().top - headerHight; $("html, body").animate({ scrollTop: position }, 500, "swing"); //return false; }); |
headerの高さを取得して修正してくれます。