技術Note

ここ数年はヘッダーを上部に固定するデザインが主流になっています。

スムーススクロールもhtmlタグに「scroll-behavior: smooth;」を加えるだけなのでとても簡単になっています。

それによって起こる問題が「アンカーリンクで飛んだ場合、コンテンツがヘッダーに埋まってしまう問題」です。

今回はそれを簡単に対応する方法を紹介します。

scroll-paddingを設定する

やり方はとても簡単。

htmlタグにヘッダーの高さ分（必要であれば余白分追加）scroll-padding-topを設定するだけです。

横スクロールの場合はscroll-padding-leftやscroll-padding-rightを使います。

CSS

html {
  scroll-padding-top: 80px; // ヘッダーの高さ分設定
}

従来だとpadding-topとmargin-topにマイナスの値を設定する方法が取られていたのですがレイアウトに影響してしまうため場合によっては調整が多くかなり面倒でした。

ですが最新CSSを使えばたったこれだけで済んでしまいます！すごい！！

CSS変数を使い更に楽にしてみる。

ですがこれだけだとPC/SPでヘッダーの高さが違う場合やヘッダーの高さが変わる場合にそれぞれ追記が必要になってしまいます。

そこも自動化してしまいましょう！！

CSS

html {
  /* 下２つの数字は環境似合わせて変えてね */
  /* 95px：変数が取得できなかった場合の初期値 */
  /* 20px：スクロール時の上部のゆとり */
  scroll-padding-top: calc((var(--headerHeight, 95px)) + 20px); 
}

JavaScript

  window.addEventListener('DOMContentLoaded',function(){
    let bodyElm = document.body;
    let header = document.querySelector('header'); // ヘッダータグが複数ある場合はID指定などに変える

    function set_header_height() {
      if (header){
        bodyElm.style.setProperty('--headerHeight',header.clientHeight+'px')
      }
    }
    
    set_header_height();
    window.addEventListener('resize',set_header_height);
    window.addEventListener('scroll',set_header_height);
  });

この２つをコピペするだけで完全解決です！！

Javascriptでヘッダーの高さを取得しbodyタグにCSS変数を設定しています。
後はそれをCSS側で読みscroll-padding-topに設定しているだけです。

変数の設定はページ読み込み時・画面リサイズ時・スクロール時に行われるので可変ヘッダーにも対応しています！！

とは解説・紹介したものの、当ブログはプラグインの独自JSによるアンカーリンクなので別途設定が必要になります。ひぃぃん…

意外と面倒だった対応が最新CSSでかなり楽になっているものは多いので今後も紹介していきます！！！