[JS]ページ内アンカーでスクロール時のアニメーションの種類やスピードが調整できる超軽量ライブラリ -MoveTo
Post on:2017年3月23日
sponsors
ページ内アンカーに移動させる時に、アニメーションでスムーズにスクロールさせるスクリプトをいろいろありますが、実装が簡単で、微調整も簡単に設定できる超軽量（2kb）のスクリプトを紹介します。
等速のアニメーション、緩和のアニメーション、到達地点の補正なども設定できます。
MoveToのデモ
MoveToのデモは、下記ページで楽しめます。
デモでは、アニメーションは「easeOutQuart」、スクロール時間は「300ms」に設定されています。
MoveToの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <script src="moveTo.min.js"></script> </head> |
Step 2: HTML
ページ内アンカーなので、まずはコンテンツ内にidを与えます。
|
1 2 |
<div id="section-1">section 1</div> <div id="section-2">section 2</div> |
アンカー指定はa要素だけでなく、button要素にも適用できます。
|
1 2 3 |
<a href="#section-1" class="js-trigger" data-mt-duration="300">Trigger</a> <button type="button" class="js-trigger" data-target="#section-2" data-mt-duration="300">Trigger</button> |
オプション
スクリプトのオプションではスクロール到達地点の補正、アニメーションのスピードや種類などが設定できます。
- tolerance
- スクロールされるターゲットの許容誤差
- duration
- スクロールの持続時間
- easing
- アニメーションの種類
- callback
- スクロールが完了した後に実行される関数
sponsors
