moveToは、ページ内リンクをクリックした時にアニメーションしながら移動させることができる軽量のスクリプトです。jQueryには依存しません。
挙動については、以下デモページをご確認ください。
スポンサードリンク
moveToの使い方
スクリプトのダウンロードと設置
まずはGitHubからファイルをダウンロードして、ファイルを解凍します。
distフォルダの中にmoveTo.min.jsというファイルが入っているので、サーバーに設置します。
スクリプトの呼び出し
HTMLの</body>の直前に、以下を追加します。
<script src="js/moveTo.min.js"></script>
ファイルパスは適宜変更してください。
HTMLのマークアップ
ページ内リンクは、以下のようにマークアップします。
<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>
a要素の場合はhref属性に、button要素の場合はdata-target属性にターゲットのIDを入れます。
オプション
moveToにはオプションも用意されています。
new MoveTo({
tolerance: 0,
duration: 800,
easing: 'easeOutQuart'
})
| tolerance | ターゲットの許容誤差 |
| duration | スクロールの時間 |
| easing | アニメーションの種類 |
| callback | スクロール完了後に実行される関数 |
あとがき
ファイルサイズもわずか3KBと軽量で、実装も簡単なので手軽に導入できますね。
なお、同じような挙動をするjQueryプラグインとしては、jquery.smoothScrollがおすすめです。