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

Ads by Google

今日紹介するJavaScriptライブラリ[MoveTo]は、容量が約1KBと軽量で、しかもjQueryに依存せずにスムーススクロールを導入できるスグレモノです。

サンプル:http://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」の4つの項目が用意されており、次のように記述して使用します。

new MoveTo({
	tolerance: 0,
	duration: 800,
	easing: 'easeOutQuart'
})

各設定項目の詳細

tolerance
スクロール到達地点の許容誤差を補正します。初期値は「0」です。
duration
スクロール到達地点まで移動する時間をミリ秒単位で指定します。初期値は「800」です。
easing
スクロールのイージング描画の種類を指定します。初期値は「easeOutQuart」です。
callback
スクロール終了時に実行される処理を指定できます。

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

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google