scroll-behavior: smooth;のスムーススクロールは便利だが使わないほうが良い

アンカーリンクは瞬時に移動する

Webページ内のHTMLタグに例えばid="last"を付ければhref="#last"をクリックした際にその場所へ遷移することができる。

<h1 id="top">TOP</h1>
<a href="#last">Go to LAST</a>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<a href="#top">Go to TOP</a>
<p id="last">LAST</p>

しかし、この方法ではページ内のどこからどこに移動したのかがわかりにくいため、現在ではスムーススクロールで移動するのが当たり前になっている。

CSSのscroll-behavior: smooth;について

スムーススクロールはCSSのscroll-behavior: smooth;で実装できるが使用するのは避けたほうが良い。

htmlタグにscroll-behavior: smooth;を付ればスムーススクロールにできるがSafariとIEでは使用できないという欠点がある。

html {
  scroll-behavior: smooth;
}

さらに使用可能なChromeであってもURLにアンカーリンク(#lastなど)が付いてしまうので、現在ではあまり実用的とは言えない。

JavaScriptのスムーススクロールと違って速さの調整やイベントによる処理なども当然できない。

最近scroll-behavior: smooth;に関する記事を見かけることがあるので、安易に使用しないよう注意が必要です。

サンプル scroll-behavior: smooth; なし

サンプル scroll-behavior: smooth; あり

カテゴリーcss