最近ではPCも上部にサイトタイトルとメニューがついたナビゲーションバーを固定し、スクロールしても上部に残るというサイトが通常のようになっている。
スマホに関してはタイトルとスマホ用メニューを表示させるボタンを設置しているような形が常識な感じ。
以前からこのようなメニューバーを設置すると問題は、アンカーリンククリックし自動でページがスクロールする場合、たどり着いたコンテンツの上部がナビゲーションバーと重なって見えなくなること。
アンカーリンクはブラウザの上部の位置に合わさるようになるのが前提とし、あとはCSSやJSで任意の位置に調整するよう工夫してきた。
先日制作していたサイトも同じようにアンカーリンクをクリックすると指定のコンテンツまでブラウザの上部の位置へスクロールし、案の定ナビゲーションバーと重なってしまった。
これでは見栄えが悪い。CSSやJSで調整する必要となるわけだけど、今ではそれを一つのCSSプロパティで行えるようだ。
それは「scroll-margin-top」。
これに値をつけることで、コンテンツの要素から値の分の上部が基準となるんだそう。例えばこれに100pxをつけると、アンカーリンクでスクロールしたら要素の上100pxの位置がブラウザの上部で止まるということ。
パディングやマージンでレイアウト崩さないように設定する必要がない。とても便利である。
ただし、JSでスクロールする仕組みを構築した場合は別。CSSでスクロールする仕組みにした場合にのみ有効。
html {
/* スクロールする仕様 */
scroll-behavior: smooth;
}
/* リンク先 */
#point {
/* 止まる位置 */
scroll-margin-top: 100px;
}