ページ内リンクをクリックした時にアニメーションしながら移動させることができるスクリプト「moveTo」

ページ内リンクをクリックした時にアニメーションしながら移動させることができるスクリプト「moveTo」

ページ内リンクをクリックした時にアニメーションしながら移動させることができるスクリプト「moveTo」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加

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がおすすめです。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。