JSでスムーススクロールするならMoveToがおすすめ

ページ内リンクをクリックすると、滑らかにスルスルとスクロールしてくれるスムーススクロール。
今では非常に多くの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のトップに戻るボタンもこのライブラリを用いて実装しています。
よろしければご覧ください。

お問い合わせ

サービスに関するご相談やご質問などこちらからお問い合わせください。

03-55107260

受付時間 10:00〜17:00