2015/01/16

【jQuery】scroll位置が自由自在になるプラグイン『scrolladvance.js』の紹介

タイトル

javaScriptやjQueryを使用して,ページトップや任意の位置にスクロール移動させることが多いと思います.

今回は,そのスクロール位置指定を細かく設定し,自由自在になるjQueryプラグイン『scrolladvance.js』の使い方を紹介します.

目次

入手方法

まずhttps://github.com/totodunet/jquery-scrolladvance/にアクセスし,右側のDownload ZIPからZIPファイルをダウンロードします.

ダウンロードしたファイルを解凍し,jQuery本体とともに以下のように読み込みます.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.scrolladvance.min.js"></script>

設置方法

用意されている関数は以下のようになっています.

$(this).scrollBottom(); //下方向へスクロール可能なピクセル数を返す 
$(this).scrollRight();_ //右方向へスクロール可能なピクセル数を返す
$(this).scrollCenter(); //中心の座標(x,y)をオブジェクトで返す

$(this).scrollBottom(value [,options]);//ページ最下部からの位置へ移動
$(this).scrollRight(value [,options]);//ページ右端からの位置へ移動
$(this).scrollCenter(value,value [,options]);//指定した(x,y)の位置へ移動
$(this).scrollCenter(target [,options]);//指定した要素が中心にくる位置へ移動

$(this).scrollTopLeft(target [,options]);//指定した要素が左上にくる位置へに移動
$(this).scrollTopRight(target [,options]);//指定した要素が右上にくる位置へ移動
$(this).scrollBottomLeft(target [,options]);//指定した要素が左下にくる位置へ移動
$(this).scrollBottomRight(target [,options]);//指定した要素が右下にくる位置へ移動

//DOMの構築完了時に右端に移動する記述例
$(document).ready(function() {
  $(document).scrollRight(0, {
      duration : 4000,
      ease : 'linear'
  });
});

オプションの指定方法は,jQueryのanimate()を使用したアニメーション動作と同様です.

http://www.hp-stylelink.com/news/2014/02/20140227.phpでオプションの指定方法を紹介しています.

サンプル

http://totodunet.github.io/jquery-scrolladvance/にサンプルがあります.

まとめ

スクロールの位置が自由自在になることで,ちょっと変わった動きを実装できたり,横幅の広いページであっても閲覧がしやすくなったりすると思います.
ぜひ使ってみてください.