【CSSのみ】スクロール位置を調整する方法

こんにちはtakosanです。

ページ内リンクのスクロール位置がズレて困ったことはありませんか？

今回はそんなあなたにとっておきの方法を紹介します。

CSSでスクロール位置を調整する方法

まず完成品はこのような感じになります。

一番上の青い部分（リンクが３つ並んでるやつ）がよくある固定ヘッダーと思ってください。

そこにあるリンクを押すと、固定ヘッダーにコンテンツが隠れないちょうどいい位置に

スクロールしていくはずです。

See the Pen CSS-scroll by yukiwebcreate (@Yukiwebcreate) on CodePen.

このようにする方法と仕組みをこれから解説します。

ポイント

コード全体を理解する必要はないので必要なところだけフォーカスして覚えてましょう。

今回のポイントは

実際に表示したいコンテンツの直前に設置した、アンカーリンク先となるdivタグの

<div id="link01" class="link-adjuster"></div>

こちらにクラス「link-adjuster」を設定し、CSSを下記のように書きました。

.link-adjuster {
  margin-top: -50px;
  padding-top: 50px;
}

こうすることで固定ヘッダーにコンテンツが隠れることなく

ちょうどいい位置にスクロールさせることができます。

ここまでで理解できた方はこれ以降読まなくても大丈夫です！

どうしてそうなるの？

細かい説明になりますが、アンカータグ(aタグ)が押されたとき、

コンテンツ直前のlink-adjusterクラスのついたdivタグの箇所に飛ぶことになります。

その際にlink-adjusterとしてクラスを設定したdiv要素はpadding-topにより

headerと同じ50pxの高さを持ちながらも、

margin-top:-50pxにより見た目上は無いように見えます。

その位置をスクロール先として指定することで、

ヘッダーの高さを考慮したコンテンツの表示が行えるという仕組みです。