8192.jp
8192.jpブログWeb制作CSSのみでページ内リンクのスムーススクロールと位置調整を実装する方法

CSSのみでページ内リンクのスムーススクロールと位置調整を実装する方法

Web制作 2022/07/25 2022/07/25

こういうのってjQuery等でスクリプトを書くor適当なライブラリを突っ込んで実装している人が多そうですが、IEが死に絶えた今ならCSSだけで実装してもいい気がしています。

目次

    とりあえずサンプル

    LINK-○を押すと、該当する見出しの位置（ナビ部分の高さも考慮された位置）までヌルっとスクロールします。

    See the Pen Untitled by Leo_8192 (@Leo_8192) on CodePen.

    動作確認はChrome（Edge）とFirefoxでしかしていませんが、綺麗にスクロールしていますよね。JS使わずにこれだけ動いてくれるなら上出来じゃないですか？

    CSS

    サンプル用の装飾はいくつか省いています。あとHTML部分はCodePenで見てね！

    html{
	scroll-behavior: smooth;
}
nav{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: #000;
}
.content{
	background: linear-gradient(#FBE9E7,#FF8A65)
}
h1{
	scroll-margin-top: 100px;
	padding: 20px 0;
	text-align: center;
}

    注目するのは2行目と16行目です。

    コード解説

    2行目
    scroll-behavior: smooth;
    ページ内リンク等でスクロールが発生した時の挙動を指定しています。今のところ指定できるのはauto（初期値）とsmoothのみ。
    16行目
    scroll-margin-top: 100px;
    スクロール位置の調整。今回のサンプルだと高さ100pxのナビが絶対位置で上部に配置されているので、スクロール対象となる見出しの上に100pxの余白を設けています。

    ね？簡単でしょ？

    最後に

    スクロールに掛かる時間や速度はブラウザ依存になってしまうので細かい調整は出来ないですが、そこにこだわりが無いならかなり有用なテクニックじゃないでしょうか？

    ちなみにスクロール位置を調整するテクニックでmargin-top: -○○px;とpadding-top: 〇〇px;を組み合わせるという方法も有名ですが、パッと見で何をしているスタイルなのか分かりにくいし、場合によっては重なり部分の考慮もしなきゃいけないので嫌いです。

    Web制作

    関連記事

    PR