AnimateScrollプラグインの導入方法、使い方、オプションなどについて

スムーズなスクロールのページ内リンクを実装するjQueryプラグイン「AnimateScroll」の導入方法、使い方、オプションなどについて。

導入

AnimateScroll – jQuery Plugin for Animating Scrollより、「animatescroll.js-master.zip」をダウンロード。

解凍すると、9個のファイルが現れるが、主に使うのは「animatescroll.noeasing.js」か「animatescroll.min.js」の何れか1つ。

読み込み例

jQueryのプラグインなので、「jquery.js」の読み込みも忘れずに。

「Easing Effects」を使わない場合

<script type="text/javascript" src="http://hoge.tld/animatescroll.noeasing.js"></script>

のようになる。

「Easing Effects」を使う場合

<script type="text/javascript" src="http://hoge.tld/animatescroll.min.js"></script>

のようになる。

使い方

jQuery('セレクター').animatescroll(オプション);

リンク元のonclick属性に上記構文に基づくコードを書くだけ。

例えば、a要素に、body要素へのページ内リンクを貼りたい場合、下記のようになる。

<a onclick="jQuery('body').animatescroll();">body</a>

例えば、a要素に、body要素へのページ内リンクを貼り、更に、「Easing Effects」の「easeOutBounce」を使う場合、下記のようになる。

「Easing Effects」とは何ぞやと言う人は、jQuery Easing Plugin | エフェクト動作パターン集も読んでね。

<a onclick="jQuery('body').animatescroll({easing:'easeOutBounce'});">body</a>

オプション

easing
「Easing Effects」を使う場合、「Easing Effects」のスタイルを指定する。
scrollSpeed
スクロールの速度をミリ秒単位で指定する。
padding
スクロール先の位置を上下方向に調整できる。
element
初期設定値は、「body」である。
onScrollStart
スクロール開始直前に呼び出す関数を指定できる。
onScrollEnd
スクロール終了直後に呼び出す関数を指定できる。

実装例(サンプル)

スポンサード リンク

カテゴリー: AnimateScroll, JavaScript, jQuery, プラグイン パーマリンク