MISTY-NET JavaScript講座 HOME / ご利用について / リンクに関して / 推奨環境 / 免責・規約 / お問合せ / リンク集 / Q&A
安心・高速・低価格!ホスティングサービスはミスティーネットへ!

JavaScript 入門編

JavaScript 活用編

ラブラブメールでツーショット

人気サイトランキング


   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 有限会社ミスティーネット All Rights Reserved .