CSSで追従ヘッダーをfixedやstickyで作っているときにページ内リンクがずれる問題の解決 #CSS

検索するとmargin-top:-100px;padding-top:100px やJavaScript, jQueryで解決するような記事が沢山出てくる。

でも一番シンプルな解決方法は scroll-padding-top を使うことのようだ。

scroll-padding-top: 100px;

最初margin-topとpadding-topで作っていて、いやこれ各要素で干渉しないように設定していくの面倒すぎる、何か別の方法あるだろうと思って別の記事を探したら見つかった。

プログラミング系は割とまともな検索結果が出るんだけど、こういうCSSのTIPS的な記事は一番良いのが上位に出てこないよねえ…。

上記の記事は、記事内にfixedやstickyというテキストが無いことの影響か。

こういうときこそChatGPT？

CSSのfixedやstickyでヘッダーを固定表示すると、ページ内リンクのスクロールがズレてしまう。解決方法は？

ページ内リンクのスクロールがズレてしまう問題は、固定ヘッダーがページ内リンクのターゲット要素を覆ってしまうことが原因です。この問題を解決するためには、ターゲット要素までのスクロール位置を調整する必要があります。以下にいくつかの解決方法を挙げます。

CSSで:target疑似クラスと::before疑似要素を利用する方法:
この方法では、ターゲット要素に対して疑似要素を追加し、その高さとマージンを調整してスクロール位置を補正します。
:target::before {
  content: "";
  display: block;
  height: ヘッダーの高さ;
  margin-top: -ヘッダーの高さ;
}
ヘッダーの高さには、実際のヘッダーの高さを指定してください。

JavaScriptでスクロール位置を調整する方法:
この方法では、ページ内リンクがクリックされたときに発生するイベントを監視し、スクロール位置を調整します。
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (event) {
    event.preventDefault();

    const target = document.querySelector(this.getAttribute('href'));
    const headerHeight = document.querySelector('ヘッダーのセレクタ').offsetHeight;

    window.scrollTo({
      top: target.offsetTop - headerHeight,
      left: 0,
      behavior: 'smooth'
    });
  });
});
ヘッダーのセレクタには、実際のヘッダー要素に対応するCSSセレクタを指定してください。

どちらの方法を選んでも、ページ内リンクのスクロール位置が固定ヘッダーによって覆われないように調整できます。必要に応じて、いずれかの方法を適用してみてください。

scroll-padding-top を使う方がより良い解決方法なのでは？

おっしゃる通り、scroll-padding-top を使う方法は、ページ内リンクのスクロール位置が固定ヘッダーによって覆われる問題を解決するためのシンプルで効果的な方法です。このプロパティは、スクロールコンテナ（通常はまたは
要素）に適用され、スクロール位置を調整する際に上部のパディングを考慮します。
以下のようにスタイルシートに追加して、ページ全体に適用できます。
html {
  scroll-padding-top: ヘッダーの高さ;
}
ヘッダーの高さには、実際のヘッダーの高さを指定してください。これにより、ページ内リンクのターゲット要素が固定ヘッダーの下に表示されるように調整されます。

scroll-padding-top の利点は、CSS のみで実現できることと、スムーズスクロールなどのブラウザのデフォルトのスクロール動作に影響を与えずに調整できることです。ただし、一部の古いブラウザではサポートされていないことに注意してください。最新のブラウザでは、このプロパティを利用することで簡単に問題を解決できます。

聞けば答えてくれるが、ChatGPT-4でもまだちょっと足りないようだ。

というか、Webで検索したときに優勢な答えがそのままAIの妥当な答えとして学習されていて、それが返ってくるのかな？
それだとこういった用途には使えないな…。