今日紹介するJavaScriptライブラリ［MoveTo］は、容量が約1KBと軽量で、しかもjQueryに依存せずにスムーススクロールを導入できるスグレモノです。
サンプル：https://on-ze.com/demo/js-moveto/
使い方は超簡単。
下記サイトからダウンロードしたスクリプトファイル『moveTo.min.js』を読み込み、トリガーの設定をするだけ。
GitHub : https://github.com/hsnaydd/moveTo
上記サイト右上に表示されているボタン『Clone or download』→『Download ZIP』とクリックするとスグにダウンロードがはじまります。
入手した『moveTo.min.js』はHTMLの適当な箇所で読み込みましょう。
<script src="moveTo.min.js"></script>
またこの作業と合わせてリンクターゲットも指定しておきます。
具体的には、下記のようにID属性を指定することになりますね。
<div id="target">ここにスクロールしてきますよ！</div>
最後にスクロールを発火させるためのボタンを作ります。
<a href="#target" class="js-trigger" data-mt-duration="300">Trigger</a>
または……
<button type="button" class="js-trigger" data-target="#target" data-mt-duration="300">Trigger</button>
初期設定は「tolerance」「duration」「easing」「callback」の４つの項目が用意されており、次のように記述して使用します。
const moveTo = new MoveTo({
duration: 800
});
const triggers = $('.js-trigger');
for (var i = 0; i < triggers.length; i++) {
moveTo.registerTrigger(triggers[i]);
}
たったこれだけ！
各設定項目の詳細
- tolerance
- スクロール到達地点の許容誤差を補正します。初期値は「0」です。
- duration
- スクロール到達地点まで移動する時間をミリ秒単位で指定します。初期値は「800」です。
- easing
- スクロールのイージング描画の種類を指定します。初期値は「easeOutQuart」です。
- callback
- スクロール終了時に実行される処理を指定できます。
単純なスムーススクロールの実装で、これだけ設定できれば充分ではないでしょうか。
ぜひお試しください！
