この記事にはPRが含まれます
ページ内リンクのスクロール位置がズレて困ったことはありませんか？
固定ヘッダーのせいで、コンテンツの上部がヘッダーに隠れてまう・・・
JavascriptとかjQueryは使わず、CSSだけで実装したい
今回はそんなあなたにとっておきの方法を紹介します。
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により見た目上は何も無いように見えます。
その位置をスクロール先として指定することで、50px分上部に余白を作りジャンプできるわけです。
これにより、ヘッダーの高さを考慮したコンテンツの表示が行えるという仕組みです。
なるほど、便利やな
Web制作・フロントエンドの学習にはこちらもご参考にどうぞ！
もう持ってる？人気の書籍
