こんにちはtakosanです。
ページ内リンクのスクロール位置がズレて困ったことはありませんか?
固定ヘッダーのせいで、コンテンツの上部がヘッダーに隠れてしまう・・・
JavascriptやjQueryは使わず、CSSだけで実装したい
今回はそんなあなたにとっておきの方法を紹介します。
CSSでスクロール位置を調整する方法
まず完成品はこのような感じになります。
一番上の青い部分(リンクが3つ並んでるやつ)がよくある固定ヘッダーと思ってください。
そこにあるリンクを押すと、固定ヘッダーにコンテンツが隠れないちょうどいい位置に
スクロールしていくはずです。
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により見た目上は無いように見えます。
その位置をスクロール先として指定することで、
ヘッダーの高さを考慮したコンテンツの表示が行えるという仕組みです。