「ScrollTo」プラグインの使い方

「ScrollTo」はカスタマイズ可能な低サイズのプラグインで、ウェブページやウィンドウ上の要素間をスムーズにスクロールすることができます。

javascript

スクリプトを正常に動作させるためにスクロールを含むhtmlファイルに以下のように記述し、ScrollTo.jsと、jQueryのフレームワークを参照させます。

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ScrollTo.js"></script>

htmlの<head>タグ内にはスクリプトの機能を基本の値で初期化するため以下のような記述が含まれています。

$(document).ready(function(){

    //スクロール設定
    $(".nav > li a q1").click(function(){
        $.scrollTo("#home" , {duration: 1000, axis:"y"});
    });

    $(".nav > li a q2").click(function(){
        $.scrollTo("#services" , {duration: 1000, axis:"y"});
    });

    $(".nav > li a q3").click(function(){
        $.scrollTo("#contacts" , {duration: 1000, axis:"y"});
    });

    //スクロール初期設定
    $.scrollTo("#home" , {duration: 1000, axis:"y"});

});

メインのready()ファンクションはシンプルでわかりやすく、ページ全体に使えます。「nav > li a.q1」クラスのついた要素(<li>タグ)をクリックすれば「home」IDの付いた要素へアニメーションつきでスクロールします。scrollTo()ファンクションではターゲットポジションと属性を設定します。スクリプトの属性は以下のような値を定義しています。

  • axis: – スクロールする軸(値の例 x, y, xy, yx);
  • duration: – アニメーションの長さ。初期値はnone (同時);
  • queue: – trueで縦方向、横方向両方にスクロールする場合、まず一つの軸方向に動かし、次にもう一方の方向に動かします。(動かす順番に合わせて軸オプションを設定してください。例:xyやyxなど)

ターゲットポジションを設定するにはいろいろな方法があります。以下に例を挙げます。

  • 数値を直接記述
  • ’400′,’100px’,'+=30px’,など文字列として記述
  • DOM要素を記述(必然的に、スクロールできる要素の子要素になる)
  • スクロールできる要素に関連するセレクタ
  • 文字列’max’で最後までスクロール
  • 文字列で、包含しているコンテナ内での位置を%で指定する(例:50%で中間地点まで移動)

html

以下にhtmlの記述例を示します。

<!--ここからサービスページ-->
<div class="page" id="services">
</div>
<!--ここまでサービスページ-->
<!--ここからホームページ-->
<div class="page" id="home">
</div>
<!--ここまでホームページ-->
<!--ここからコンタクトページ-->
<div class="page" id="contacts">
</div>

次に、対応するブロックへのリンクを含んだ項目リストを記述します。リンクのclass属性でどの要素へスクロールするかを設定しています。

<ul class="nav">
  <li><a href="#" class="q1">home</a></li>
  <li><a href="#" class="q2">services</a></li>
  <li><a href="#" class="q3">contacts</a></li>
</ul>

Comments are closed.