scroll-margin-top でヘッダー固定されたページのアンカーリンクの座標を調整する

2021年10月4日

皆さんこんにちは、末ちゃんです。

先日また我々を喜ばせるニュースが舞い込んできました。
Google 検索が公式にInternet Explorerのサポートを10月1日に終了したというニュースです。

上記はGoogleのエンジニアさんによるTweetです。
なお、まったく使用できなくなるわけではなくて、基本的な検索機能は引きつづき利用できるとのことです。

なお、Internet Explorer 11 自体も既に提供元のMicrosoftより、2022年6月15日にサポートが終了することを発表しています。
未だに Internet Explorer 11 をお使いの方は、いち早く移行されることをおすすめします。

さて、ようやく本題ですがウェブサイトによくある、ヘッダー固定されたページでアンカーリンクを開いたときにヘッダーがずれる問題ありますよね。

従来はJavaScriptで割り込み制御して調整していましたが、現代ではCSSで調整することができます。

そのプロパティの名前は “scroll-margin-top” です。

:target {
  scroll-margin-top: var(--header-offset);
}

たったこれだけのコードで実装できてしまいます。

なお、var(--header-offset) には随時環境にあわせて数値をいれるなり、このようにカスタムプロパティを定義するなり調整してください。

CodeSandbox にサンプルデモを記述された方がいらっしゃったので下記に引用しますので、実際に試してチェックしてみてください。

HTML Living Standard が標準仕様になってからどんどん便利な機能が策定されていっています。

過去のデバイスやシステムへのサポートも重要ですが、例えばWindows 10など初期リリースから既に6年も経過しています。

変化の早い業界故、古い環境にしがみつきすぎないように注意したいものです。