スムーズなスクロールのページ内リンクを実装する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
- スクロール終了直後に呼び出す関数を指定できる。