ヘッダーを固定する

ヘッダー部分は常にページの上部に表示させておきたい、という時は以下のようなCSSを適用させて、ヘッダー部分を固定することができます。

.header {
 position: fixed;
}

このような実装をした時、アンカーリンク（ページ内リンク）でページ内をジャンプするとヘッダーの高さ分ずれた位置に移動してしまいます。
これは、そのページの最上部の位置をヘッダー分の高さを加味せずに認識されているからです。

今回はこれを一発で解消し、なおかつスムーススクロールも可能にするjQueryの記述を紹介します。

jQueryを読み込ませる

jQureryを読み込ませた上で、下に記載のコードをコピペしてください。そうしないとjQueryなので当然動きません。

jQuery公式

jQuery公式ダウンロードはこちら

jQueryを記述する

これを丸ごとコピペして使えばOKです。ヘッダー部分はヘッダーに付与しているクラス名（IDの場合はIDでもOK）に変更してください。

var headerHeight = $('.js-header').outerHeight(); // ヘッダーについているクラス名
var urlHash = location.hash;
if(urlHash) {
    $('body,html').stop().scrollTop(0);
    setTimeout(function(){
        var target = $(urlHash);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, 600); // スクロールの速さ
    }, 100);
}
$('a[href^="#"]').click(function() {
    var href= $(this).attr("href");
    var target = $(href);
    var position = target.offset().top - headerHeight;
    $('body,html').stop().animate({scrollTop:position}, 600); // スクロールの速さ
});

記述のポイント

heightの数値で指定してないところがミソです。
数値で指定してしまうとPCとスマホでヘッダーの高さが違う場合にずれが生じたり、それぞれのJavaScriptを記述しなくてはなりませんが、クラスで指定することでレスポンシブ対応もこの記述だけで可能になります。

「スクロールの速さ」の数値を変えると、アンカーリンク移動の際のスムーススクロールのスピードを調整することができます。

ヘッダーを常時固定にしたいケースは結構ありがちだと思うので、このコードは重宝します。

※2020/01/27追記

上記のコードで動かない事象が出たので、こちらに備忘録として残させていただきます。

  // アンカーリンク
  jQuery(function() {
    var windowWidth = $(window).width();
    var windowSm = 897; // スマホに切り替わる横幅
    if (windowWidth <= windowSm) {
      var headerHight = 70; // スマホのヘッダー等の高さ分の数値を入れる
    } else {
      var headerHight = 80; // PC のヘッダー等の高さ分の数値を入れる
    }
    jQuery('a[href^="#"]').click(function() {
      var speed = 1000;
      var href = jQuery(this).attr("href");
      var target = jQuery(href == "#" || href == "" ? "html" : href);
      var position = target.offset().top - headerHight;
      jQuery("body,html").animate({ scrollTop: position }, speed, "swing");
      return false;
    });
  });

参考にさせていただいた記事はこちらです。