[JS]ページ内アンカーでスクロール時のアニメーションの種類やスピードが調整できる超軽量ライブラリ -MoveTo

ページ内アンカーに移動させる時に、アニメーションでスムーズにスクロールさせるスクリプトをいろいろありますが、実装が簡単で、微調整も簡単に設定できる超軽量(2kb)のスクリプトを紹介します。

等速のアニメーション、緩和のアニメーション、到達地点の補正なども設定できます。

サイトのキャプチャ

MoveTo -GitHub

MoveToのデモ

MoveToのデモは、下記ページで楽しめます。

サイトのキャプチャ

デモページ

デモでは、アニメーションは「easeOutQuart」、スクロール時間は「300ms」に設定されています。

MoveToの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: HTML

ページ内アンカーなので、まずはコンテンツ内にidを与えます。

アンカー指定はa要素だけでなく、button要素にも適用できます。

オプション

スクリプトのオプションではスクロール到達地点の補正、アニメーションのスピードや種類などが設定できます。

tolerance
スクロールされるターゲットの許容誤差
duration
スクロールの持続時間
easing
アニメーションの種類
callback
スクロールが完了した後に実行される関数

sponsors

top of page

©2024 coliss