Yahoo! UI Libraryでページ内スクロール

2006/10/29 14:25

先週の会社の技術勉強会で「Yahoo! UI Library」を取り上げたので、自分のブログにも取り入れてみました。手始めにページトップへスクロールする機能を実装。

まず、YUIのライブラリを読み込みます。

<script type="text/javascript" src="http://fkoji.com/js/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="http://fkoji.com/js/yui/build/event/event.js"></script>
<script type="text/javascript" src="http://fkoji.com/js/yui/build/dom/dom.js"></script>
<script type="text/javascript" src="http://fkoji.com/js/yui/build/animation/animation.js"></script>

次に、ページトップへスクロールする関数を定義します。

function jumpPageTop() {
 var anim = new YAHOO.util.Scroll(
  document.getElementsByTagName('html')[0],
  { scroll: { to: [0, 0] } },
  0.5,
  YAHOO.util.Easing.eathBoth
 );
 anim.animate();
}

YAHOO.util.Scroll()は引数を4つ取れます。

一つ目はスクロールのターゲットとなる要素です。idもしくはDOMで与えます。ページ内スクロールの場合、対象はhtmlタグになるので、document.getElementsByTagName(“html”)[0]で与えました。

二つ目はスクロール値です。オブジェクト形式で与えます。toの場合絶対値でbyの場合相対値となります。

三つ目はdurationです。ここに与えた秒数でアニメーションが実行されます。

四つ目は一般にYAHOO.util.Easingクラスのメソッドを与えます。

生成したオブジェクトのanimate()メソッドでスクロールが実行されます。

実際に実装した機能を見てみたいときは、各エントリーの終わりにある「ページトップへ △」というリンクをクリックしてみてください。