smooth-scroll.jsを使ってスムーススクロールさせる

jQueryライブラリのsmooth-scroll.jsを使って、ページ内リンクをスムーズスクロールさせてみましょう。

簡易的なスムーススクロールであればCSSのscroll-behavior: smooth;を使うことで可能ですが、ライブラリであれば様々なオプションを使うことができます。

CONTENTS

1 サンプル
2 HTML
3 CSS
4 JavaScript
5 CSSのみでスムーススクロールする

サンプル

サンプルを見てみましょう。

See the Pen
smooth-scroll.jsを使ってスムーススクロールさせる by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

サンプルではページ内のリンクをクリックすると1000ミリ秒で目的のリンクにスムーススクロールします。アニメーションにはjQuery EasingのeaseInOutQuintを使っています。

HTML

HTMLはこんな感じです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <!-- partial:index.partial.html -->
    <header id="top">
      <ul>
        <li>LOGO</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
      </ul>
    </header>

    <section id="1" style="background: #f6e58d">
      <div><a href="#2">1</a></div>
    </section>

    <section id="2" style="background: #ff7979">
      <div><a href="#3">2</a></div>
    </section>

    <section id="3" style="background: #95afc0">
      <div><a href="#3">3</a></div>
    </section>

    <div class="arrow"><a href="#top">TOP</a></div>
    <!-- partial -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.3/smooth-scroll.min.js"></script>

    <script>
      var scroll = new SmoothScroll('a[href*="#"]', {
        speed: 1000,
        easing: "easeInOutQuint",
        header: "#top",
      });
    </script>
</body>
</html>

<a>のhref属性に「#」を含むリンクにスムーススクロールを適用させるだけなので、特別なマークアップは必要ありません。

また、ハイライトしている34行目から36行目は、ライブラリを動作させるためのjQuery本体とアニメーションさせるためのjQuery Easing、スムーススクロールさせるライブラリのsmooth-scroll.jsを</body>直前で読み込んでおく必要があります。

CSS

CSSは特に何もありません。

JavaScript

JavaScriptはjQueryを使います。jQuery → jQuery Easing → smooth-scroll.jsの順番で読み込んだら、その下にsmooth-scroll.jsを実行するためのコードを書きます。

<script>
  var scroll = new SmoothScroll('a[href*="#"]', {
    speed: 1000,
    easing: "easeInOutQuint",
    header: "#top",
  });
</script>

speed: 1000

スクロールするときの時間を設定できるオプションです。JavaScriptは「ミリ秒」という単位を使うので、1000の場合は1秒です。500にすると0.5秒となります。

speed: 1000

easing: “easeInOutQuint”

jQuery Easingを使うためのオプションです。jQuery Easingは下記のものに対応しています。

linear
easeInQuad
easeInCubic
easeInQuart
easeInQuint
easeOutQuad
easeOutCubic
easeOutQuart
easeOutQuint
easeInOutQuad
easeInOutCubic
easeInOutQuart
easeInOutQuint

今回は「easeInOutQuint」を使いました。

header: “#top”

positionのfixedで固定されたヘッダーの高さを自動計算するオプションです。固定されたヘッダーとコンテンツが重ならないようにできます。

headerオプションには、要素、id、classのいずれかを指定します。

offset

スクロールしたときのオフセットを指定できるオプションです。オフセットとは着地点からの距離のことで、下記の場合は32pxの距離を空けるという意味です。

offset: 32

今回は使用していませんが、指定した距離を空けた状態でスクロールを停止させられます。ブログなど比較的ページ内リンクが多くて見出しをしっかりと見せたいときには設定しておくと良いかもしれません。

CSSのみでスムーススクロールする

CSSのみでスムーススクロールさせるには、scroll-behaviorというプロパティをhtmlに使います。

html {
  scroll-behavior: smooth;
}

複雑なアニメーションを設定することはできませんが、動作が軽くてjQueryにも依存しないため、シンプルなページにはおすすめです。

See the Pen
CSSのscroll-behaviorを使ってスムーススクロールさせる by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.