ページ内リンクでスムーススクロールを実装する際、たいていはJavaScriptやjQueryを用いる方法を検討するでしょう。

しかしCSSの新機能scroll-behaviorプロパティを使えば、簡単にスムーススクロールを実現できます。

「scroll-behavior」とは？

「scroll-behavior」は、ページ内リンクをクリックときに、該当箇所へ時間をかけてスクロールするイベント（スムース・スクロール）を実行させるプロパティです。
CSSわずか1行で設定が可能で、JavaScriptなしで手軽に導入できます。

CSS：

html {
	scroll-behavior: smooth;
}

HTMLサンプル

<a href="#example">ここをクリックすると</a>
.
.
.
<div id="example">ここまでスクロールするよ</div>

実際にこのサイトでも導入しています。
下のボタンをクリックしてみてください。

「scroll-behavior:smooth;」が効かないときは？

スムーススクロールが動作しない場合、以下のような理由が考えられます。

  • 対象の親要素にoverflow:hidden;が設定されている
  • 対象の要素にheight:100vh;が設定されている
  • 他のJavaScriptとコンフリクト（干渉・競合）している

scroll-behaviorプロパティの構文

「scroll-behavior」プロパティの初期値はautoで、スクロールスピードを変えるためにはsmoothを指定します。 

/* 初期値 */
html {
	scroll-behavior: auto;
}
/* スムーススクロール */
html {
	scroll-behavior: smooth;
}

「scroll-behavior」のブラウザ対応状況

Safariではバージョン15.4からscroll-behaviorプロパティに対応し、モダンブラウザ全てで使えるようになりました。

注意点

便利な「scroll-behavior」ですが注意点もあります。

  • すべてのページ内リンクがスムーススクロールになる
  • 移動速度の設定ができない
  • 遷移先の位置を細かく指定できない
  • URLにアンカーリンクがつく

スクロール位置を調整する「scroll-padding-top」を利用する

遷移先の位置を指定したい場合、「scroll-padding-top」を使います。

例：

html {
	scroll-padding-top: 100px;
}

この例では画面の最上部から100px下に移動します。

リンクした際のハッシュ（#）をURLから取り除く

リンクした際にURLの末尾につく『#』を取り除くjavascriptを紹介します。

(function() {
	window.addEventListener("hashchange", function() {
		const sp = location.href.split("#");
		history.replaceState(null, null, sp[0]);
	});
})();

まとめ

scroll-behavior:smooth;はいくつかの注意が必要なものの、JavaScriptやjQueryライブラリで実装する場合と比べて格段に、CSSだけで手軽にスムーススクロールのアニメーションを加えることのできる便利なプロパティです。
ぜひお試しください。

元の場所に戻る