システム Edit : 2020.04.27 Update : 2024.11.07

ページ内リンク(アンカーリンク)で、見出しの少し上にリンクさせる小技

アンカーリンクを使って、ナビゲーションメニュー等でページ内スクロールさせること、あるかと思います。

その際にあるあるなのが、スクロールしたときに見出しが隠れること😅

今まではjsやjqueryでスクロール位置を調整していました。
1pしかないサイトの場合は問題ないのですが、複数ページあるサイトで他のページからページ内スクロールがあるページにhttp://○○#hoge等で遷移してきた際にはうまく調整できないという問題点がありました。

そんな時に簡単にできるのが、cssの:beforeを使って見えないところに空間を作る方法です。

#hoge::before {
    display: block;
    height: 7rem;
    margin-top: -7rem;
    content: "";
}

#hoge::before {

display: block;

height: 7rem;

margin-top: -7rem;

content: "";

}

ジャンプさせたい目的のブロック(IDを振っているブロック)にbeforeで見えない高さを設定します。
スマホ用に値を変更したいときは、media queryで変えればいいだけなので、簡単!IE11でも使えます。

めっちゃナイスな小技でした!

【CSS】ページ内リンクのジャンプ先の位置を調整する

Contents

新情報追記　2024/06/21

新情報追記　2024/06/21

scroll-padding-topを利用する

数年前に書いていた上記の内容ももちろん使えるのですが、最新版のもっと簡単な方法が✨
htmlにscroll-padding-topというcssを利用する方法です。

html {
　　scroll-snap-type: y proximity;
　　scroll-padding-top: 100px;
}

html {

　　scroll-snap-type: y proximity;

　　scroll-padding-top: 100px;

}

https://qiita.com/Showork620/items/21a80b666758ec9391b5

これだけなので、より便利ですね。
ここに「scroll-behavior: smooth;」を追加するとスクロールの動きがさらにスムースになって便利だそう！
しかし、私は個人的に案件で「scroll-behavior: smooth;」を使うことで、意図せぬ影響が出てしまう一件があった（WPで目次のプラグインを使ったときだったかな？）ので、scroll-behaviorのプロパティを使うのは、サイトの他の仕様や動きに合わせてご自身の判断で設定されるのがいいのかな、とおもいます。