Future is now: [jQuery] jQuery.animation() でスクロールをアニメーション処理

ページ内リンクへの移動をアニメーションで実行したいと思い立ってjQueryのマニュアルを確認したところ、
特別なプラグインを導入しなくても、jQuery.animate() メソッドで実現できることがわかったのでまとめました。

.animate() に渡せるプロパティー

.animate() メソッドでは、アニメーションの動きを、cssプロパティと値を定義したオブジェクトを渡して指定します。
基本的に、数値を指定できるcssプロパティ(width, height, opacity など)のみ指定できますが、
cssのプロパティ以外でも、scrollTop ,scrollLeft　など、アニメーション可能なプロパティが定義されています。

今回は下方向に画面をスクロールさせたいので、アニメーションさせるプロパティに"scrollTop"を指定します。

scrollTop で下方向にスクロール

というわけで、class に"scrollAnchor" が指定されたアンカーをクリックすると、
リンク先の要素までウィンドウをスクロールするプログラムを作成してみました。
(ちなみに、JavaScriptが無効になっていても移動は可能です)

ポイントとしては、

.offset()メソッドで、リンク先の要素のドキュメント内の縦方向の相対位置を取得している
animationメソッドはbody要素に対して実行している

サンプル(jQuery-1.7.1 で実行。動作は chrome 16 , IE6で確認しました。)

<!-- 以上省略 -->
<body>
 <a href="#scrollDest" class="scrollAnchor">scroll!</a>

 <div id="container">
     <div style="height: 500"></div>
     <div style="height: 500"></div>
     <div style="height: 1000; width: 500; background-color: black" id="scrollDest"></div>
 </div>

 <script type="text/javascript" src="./lib/jquery-1.7.1.js"></script>
 <script type="text/javascript">

     var body = $("body:first");
     $("a.scrollAnchor").click(function(evt){
         // デフォルトのanchorの処理を停止
         evt.preventDefault();           

         var destId = $(this).attr("href");

         // .offset()で、リンク先要素のドキュメント内の相対位置を取得
         var destTop = $(destId).offset().top;   

         // ウィンドウをスクロールさせるために、body要素に対してanimateメソッドを呼び出す
         body.animate({scrollTop: destTop}, 1000);
     });

 </script>
</body>
<!-- 以下省略 -->

要素内でのスクロール

overflow: scroll もしくは overflow: hidden が設定されている要素内で、特定の子要素までスクロールさせたい場合のサンプルです。
このケースでは、.position() メソッドで要素内の位置を取得しています。

サンプル

<!-- 以上省略 -->
<body>
 <div id="container" style="height: 1000; overflow: scroll">
     <a href="#scrollDest" class="scrollAnchor">scroll!</a>
     <div style="height: 500"></div>
     <div style="height: 500"></div>
     <div style="height: 1000; width: 500; background-color: black" id="scrollDest"></div>
 </div>

 <script type="text/javascript" src="./lib/jquery-1.7.1.js"></script>
 <script type="text/javascript">
     var container = $("div#container");

     $("a.scrollAnchor").click(function(evt){
         evt.preventDefault();

         var destId = $(this).attr("href");
         var destTop = $(destId).position().top;   // .position()で要素内の相対位置を取得

         container.animate({scrollTop: destTop}, 1000);
     });

 </script>
</body>
<!-- 以下省略 -->

まとめ

ページ内要素への移動をアニメーション化する場合は、jQuery.animate() メソッドに、"scrollTop" プロパティを持つオブジェクトを渡す
ウィンドウをスクロールさせるのか、特定の要素内でスクロールさせるのかに注意する

参照URL
.animate() - jQuery API:
http://api.jquery.com/animate/

参照書籍
jQuery クックブック

jQueryクックブック

Future is now

2012年2月11日土曜日

[jQuery] jQuery.animation() でスクロールをアニメーション処理

.animate() に渡せるプロパティー

scrollTop で下方向にスクロール

要素内でのスクロール

まとめ

0 件のコメント:

コメントを投稿