ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

CSSだけでスムーススクロール!scroll-behaviorの使い方

CSSだけでスムーススクロール!scroll-behaviorの使い方

「CSSだけでスムーススクロールさせたい」

「scroll-behaviorの使い方を知りたい」

悩み

こんな悩みにお答えします。

これまで、ページ内リンクの移動をスクロールでなめらかに行うスムーススクロールはJavaScript、jQueryを使う必要がありましたが、今では、「scroll-behavior: smooth;」を使うことでCSSだけでスムーススクロールを実現させることができました。

scroll-behavior:smooth;デモ

この記事では、以下のことがわかります。

  • scroll-behaviorの使い方
  • IEへの対応方法
  • 動かないときの対処法

私は、2015年からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作してきました。
その間、いろいろな失敗を繰り返し、クライアントからのフィードバックや本などで勉強することにより、多くのノウハウを得ることができました。

記事を読み終えると、JavaScript、jQueryを使うことなくCSSだけでスムーススクロールが実現でき、軽いWebサイトを制作することができます。

目次
  1. scroll-behaviorの使い方
    1. 基本的な使い方
    2. IE対応方法
      1. ページ内リンクがひとつの場合
      2. ページ内リンクが複数の場合
    3. うまく動かないときの対処法
      1. 移動先を固定させていない?
  2. まとめ

scroll-behaviorの使い方

基本的な使い方

以下のように、html要素に対して「scroll-behavior: smooth;」を指定するだけです。

html{
  scroll-behavior: smooth;
}

これだけで、ページ内のリンクがすべてスムーススクロールになります。

あまり使う必要は無いと思いますが、スムーススクロールにしない場合は、「smooth」のところを「auto」にします。
というか、はじめから何も指定しなければスクロールスクロールにならないです。

html{
  scroll-behavior: auto;
}

「簡単にスムーススクロールが実現できました。」
で、IE対応が必要ない場合はここで終わりです。

当然のようにIEでは動かないので、終わることができないですね。
どちらかというとIEで実現させることのほうがメインになるので次に進みます。

IE対応方法

IE対応方法では、まずpolyfillを読み込みます。

npmインストールがよくわからない場合は、こちらのjsを読み込みます。

<script src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script>

ページ内リンクがひとつの場合

よく使う「トップに戻る」以外にページ内リンクがない場合は、以下のようにJavaScriptを書きます。

<script>
window.addEventListener("load", function() {
  document.querySelector("#pagetop").addEventListener("click", function (e) {
    e.preventDefault();
    document.querySelector("#top").scrollIntoView({ behavior: "smooth" });
  });
});
</script>

ページ内リンクが複数の場合

ページ内の目次などがありページ内リンクが複数ある場合は、以下のようにJavaScriptを書きます。

<script>
window.addEventListener("load", function () {
  var nodelist = document.querySelectorAll("a[href^="#"]");
  var node = Array.prototype.slice.call(nodelist, 0); 

  node.forEach(function (elem, index) {
    elem.addEventListener("click", function (e) {
      e.preventDefault();

      var href = elem.getAttribute("href");

      document.querySelector( href ).scrollIntoView({ behavior: "smooth" });
    });
  });
});
</script>

jQueryを使えばもっと簡単に書けると思いますが、「scroll-behavior」を使うこと自体が読み込み速度改善、軽量化が目的なのでjQueryは使わないものとします。

「querySelectorAll」で複数のセレクタを指定するのがわかりにくですが、aタグでhref属性が#ではじまるものすべてを取得するということになります。

普通にforEachさせようとするとIEではうまく動かないのでひと手間掛ける必要があります。
以下の記事を参考にしました。

このあたりは、scroll-behaviorだけの問題ではなくJavaScriptとIEの問題なので、覚えておくと別のことでも使うことができます。

このブログ自体も「scroll-behavior」に対応させたので、デモも必要ないかもしれませんが、一応、以下がデモになります。

scroll-behavior:smooth;デモ

うまく動かないときの対処法

以下、よくある失敗例です。

移動先を固定させていない?

ヘッダーやナビゲーションを固定(fixed,sticky)させて、そこを移動先に指定していませんか?

これは、scroll-behaviorを使うときだけでなく、JavaScriptを使ったsmooth scroll全般にいえることです。

ヘッダーをブラウザ上部に固定していれば、移動先がすでに見えているので目的地に移動する必要がなく動かないのは当然です。
ヘッダーを上部に固定させる場合は、絶対に動かないbodyを移動先に指定することで動くようになります。

POINT
ヘッダーを上部に固定させた場合は、ページ内リンクの移動先にできないので、固定させてないbodyなどを移動先に指定する。

その他のpolyfillを使えばIE11でも使える便利CSSは、こちらの記事にまとめています。

IEでも使いたい!polyfillを使えばIE11でも使える便利CSS 4選 + 1

IEでも便利なCSSを使いたいですか?この記事では、IE11に対応していないobject-fit、position:sticky;、CSS変数など、polyfillというJavaScriptを使ってIE11に対応させることができるCSSをまとめています。ぜひご覧ください。

まとめ

scroll-behaviorの使い方を解説しました。

  • CSSに、html{ scroll-behavior: smooth; } を書くだけでスムーススクロールが実現できる
  • IEへ対応させるにはpolyfillが必要
  • 動かないときは、固定させたヘッダーを移動先に指定していないか確認する

scroll-behaviorを使うことで、JavaScript、jQueryを使うことなくCSSだけでスムーススクロールが実現でき、軽いWebサイトを制作することができます。