グラビカ学習帳～新宿のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

ヘッダー固定のサイトでアンカーリンクを使用する際、そのままだとヘッダーの分だけコンテンツが隠れてしまいます。
同じページ内のアンカーリンクであればスムーズスクロールのJSに直接書き加えてしまったりするのですが、別ページへの遷移＋アンカーリンクの場合の対応を考えてみました。

以下のJSを遷移後のページに記述します。
要jQueryです。

$(function(){

    var headerH = 50; //ヘッダーの高さ

    $(window).on("load", function(){
      if(location.hash !== ""){
        var targetOffset = $(location.hash).offset().top;
        $(window).scrollTop(targetOffset - headerH);
      }
    });

});

ヘッダーの高さはサイトに合わせて変更してください。
これでヘッダー分下がった位置にスクロールされます。

ただこの手法、ページ内のすべての要素が読み込み終わってからの動作になるので、どうしても目当ての位置にスクロールされるまで時間がかかってしまい...。
どうにも気持ちの良くない感じになってしまうので、onloadを使わない手法に改善できないか考えてみたいと思います。