ページ内リンクをクリックすると、滑らかにスルスルとスクロールしてくれるスムーススクロール。
今では非常に多くのJavaScriptライブラリが提供されています。

私のおすすめはMoveTo.jsというJavascriptライブラリです。
動作サンプルはこちら

導入が簡単な上に2KBと軽量、何よりIE11でも動いてくれる素敵なライブラリなのです。

今回はMoveTo.jsの実装方法などをご紹介します。

MoveToの実装方法

npm、Yarn、Bowerそれぞれ対応していますのでお好みの方法でどうぞ。
もちろん、直接ライブラリをDLして使っても大丈夫です。

npmの場合

$ npm install moveto --save<

Yarnの場合

$ yarn add moveto

Bower

$ bower install moveTo --save

DLの場合

GitHubページ右上に表示されているボタン『Clone or download』→『Download ZIP』の順にクリックするとダウンロードがはじまります。

入手したMoveToをrequireするか、HTML上で外部スクリプトとして読み込んでください。

実装方法

1.スクロール先にID属性を用意

<div id="target">ここにスクロールさせたい！</div>

2.ページ内遷移のリンクを用意

<a href="#target" class="js-trigger">押したらスルスル動くリンク！！</a>

3.実行するJSを書く

const moveTo = new MoveTo();

const target = document.getElementById('target');

const trigger = document.getElementsByClassName('js-trigger')[0];

これだけで動きます。

その他、スクロール速度などのオプションも用意されています。
更にカスタマイズしたい方はGitHubページをご覧ください。

先日公開された当社社員が情報発信しているGreenwich Mediaのトップに戻るボタンもこのライブラリを用いて実装しています。
よろしければご覧ください。