ページトップへ戻る！ jQuery非依存のライブラリ「MoveTo」でスムーススクロールを実装しよう

こんにちは、フロントエンドエンジニアのライダーです。
夜中でも買いに行ってしまうくらい、コンビニの肉まんにどハマりしています。そんな便利なコンビニも、24時間営業を見直す、というニュースが流れ、時代の流れを感じています。

フロントエンド界隈でも時代は流れ、以前はデファクトスタンダートと言われていた（らしい）jQueryは、ブラウザの実装が進むにつれ、使われないことも増えてきました。

そんな中、実装に困ったのが「ページトップへ戻る」ボタンでした。そこで今回は、jQueryに依存せず「ページトップへ戻る」を実装できるライブラリをご紹介します！

MoveTo

「MoveTo」は、Webサイトにスムーススクロールを実装できるライブラリです。

スムーススクロール

ページ内遷移などでスムーズにアニメーションすることなどを指します。
有名なものだと、多くのサイトで見られるインターフェースの「ページトップへ戻る」があります。

デモサイト

https://hsnaydd.github.io/moveTo/demo/

メリット

MoveToは、非常に導入がしやすいと思います。その理由は下記。

• アニメーションライブラリではない
• スムーススクロールに特化している
• 非常に軽量（gzipで1KB）
• jQueryに依存していない
• IE10+

具体例を後述します。実装が必要になったとき、ぜひ検討してみてください！

インストール

https://github.com/hsnaydd/moveTo

npmでインストールします。

npm install moveto --save
これだけではなく、 Bower, Yarn でもインストール可能だそうです。
全てのページ内リンクに、スムーススクロールを適用する
import MoveTo from 'moveto';

export default function () {
  const moveTo = new MoveTo();
  Array.from(document.querySelectorAll('a[href^="#"]'),  trigger => {
    moveTo.registerTrigger(trigger);
  });
}
Array.from は、対象ブラウザの実装状況をみながら、 Polyfill を入れるか・実装方法を変更するかなどで対処しないといけないことに注意です。
基本的な実装方法はリポジトリのREADMEにある通りですので、ここでは少し具体的にし、プロジェクトへ取り入れやすい形にしたものを書きました。
その他のスムーススクロールライブラリ
今回紹介したMoveTo以外にも

jump.js
smooth-scroll.js
sweet-scroll

などがありますので、MoveToで機能が足りない場合など試してみてください。
おわりに
小さな機能がひとつひとつ独立していくと、プロジェクトをこなすごとにどんどん制作スピードがあがります。こういうものは汎用的な形で蓄積させ、爆速コーディングできるようになりたいですね。
         
                         
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
              Webサイト制作の実績・料金を見る