scroll-paddingでアンカーリンクのズレをなくそう(アンカーリンクの位置調整)

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

スムーススクロールも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 {
  /* 下2つの数字は環境似合わせて変えてね */
  /* 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);
  });

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

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

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

 

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

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

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜12:00、13:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。