![]() |
HOME / ご利用について / リンクに関して / 推奨環境 / 免責・規約 / お問合せ / リンク集 / Q&A | ||
![]() | |||
|
HOME >> JavaScript 活用編 >> ページのスクロール ■ ページのスクロールを行う
スタッフロールのサンプルです。 「開始」ボタンを押すとスクロールが始まります。 実際にどのようにスクロールするかを確認してみてください。
スクロール機能は、scroll 関数を使って起動します。 scroll 関数では、予め関数内で使用する変数の値を設定しておきます。 この変数の内容を変更することでスクロールの移動量やスピードを変更することが出来ます。 * サンプルでは、スクロールの停止やスピードコントロールが出来ますが、実際使用する場合には必要ありませんので、下記のソースではこれらの機能は省いてあります。 [ scroll 関数と変数の設定 ]
y = 0; // 移動距離初期値
limit = 1390; // 移動距離限界値 (スクロールするページの縦幅) timerID = null; // タイマ変数初期化 move = 4; // 移動量 (値が小さいほど滑らかにスクロールします) speed = 50; // 移動スピード (小さい値ほど早くなります) // ページスクロールする関数 function scroll() { // ページのy 座標が limit を越えていなければスクロールを行う if (y < limit) { // ページをスクロールする scrollTo(0, y+=move); // タイマーをリセットする clearTimeout(timerID); // タイマーを再起動する timerID = setTimeout("scroll()", speed); } }
ページのスクロールには、JavaScript で用意されているscrollTo 関数を使い、
スピードの調整にはタイマー機能を使ってコントロールしています。 <scrollTo 関数> scrollTo( x, y ) x ・・・ ページのx 座標を指定します y ・・・ ページのy 座標を指定します * ここではx 座標を0 のままで、y 座標を増やしていくことで画面をスクロールしています。 <タイマー関数> タイマーは一定時間後に処理を行うための関数です。 setTimeout 関数と clearTimeout 関数をセットで使用します。 setTimeout ・・・ タイマーの設定を行います clearTimeout ・・・ タイマーを解除します タイマー一回起動ごとに、y 座標値を増やしてページ移動を行います。 このタイマーの起動間隔を変更することでスクロールスピードを調整できます。
Copyright (C) since 2004 MISTY-NET All Rights Reserved .
|