スムーススクロールとは

ページ内リンクをクリックした際、遷移先へ流れるようにスクロールする効果がスムーススクロールです。スムーズスクロールとも呼ばれます。

以前はJavaScriptなどで実装していましたが、現在はCSSのみで設定できるようになりました。

注意点

端末やブラウザ側の設定でアニメーションをOFFにしていると、スムーススクロールを設定しても反映されません。もし上手くいかないときは端末やブラウザの設定を確認しましょう。

scroll-behaviorとは

scroll-behavior（スクロール ビヘイビア）とはページ内リンクのスクロール方法を指定できるCSSのプロパティです。設定できる値は「auto（オート）」と「smooth（スムース）」の2種類です。

auto

scroll-behaviorに初期値として設定されている値です。遷移先へ瞬時にスクロールします。

smooth

スムーススクロールを実装する際に使用する値です。遷移先へ滑らかにスクロールします。

CSS

/* スムーズスクロールをさせたいブロック要素に設定 */
html {
  /* 全体に設定する場合はhtmlでOK*/
  scroll-behavior: smooth;
}

基本的な書き方

See the Pen scroll-behavior1 by DREAM NET WORKS (@dnw) on CodePen.

注意点

スムーススクロールを簡単に実装できるscroll-behaviorですが、ページ内リンクをクリックした際、URLにID名が表示されます。URLにID名が表示されていてもSEO上は問題ありませんが、ユーザーがそのままブックマーク（お気に入り）登録をしてしまうとID名が含まれた状態で登録されてしまうので、次に開くとき、指定されたID名の項目が先頭に表示されてしまいます。ユーザビリティを考慮する場合は、JavaSqriptやjQueryを使用してスムーススクロールを実装しましょう。