【JavaScript】超軽量スムーススクロール『MoveTo』をご紹介！

今日紹介する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

スクロール終了時に実行される処理を指定できます。

単純なスムーススクロールの実装で、これだけ設定できれば充分ではないでしょうか。
ぜひお試しください！

• DEMO : https://hsnaydd.github.io/moveTo/demo/
• GitHub : https://github.com/hsnaydd/moveTo