スクロール
ここでは、ページを上下にスクロールさせる方法について取り上げます。 特定の位置にジャンプしてもらいたい時や、 タイマーと組み合わせてスタッフロールを作ったりすることができます。
ページをスクロールさせる
では、以下のスクリプトをHTMLのBODY内にコピー＆ペーストしてみてください。 改行タグを沢山入れて、スクロールバーを表示させています。
<br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <form> <input type="button" value="上へ" onclick="GoTop()"> <input type="button" value="200px下へ" onclick="Down()"> </form> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br>
続いてHTMLのヘッダーに以下の2つの関数を記入して下さい。
<script type="text/javascript"> <!-- //ページの先頭に戻る function GoTop() { scrollTo(0,0); } //200ピクセル下に移動する function Down() { scrollBy(0,200); } // --> </script>
下のサンプルをご覧下さい（ボタンが見える所までページを下にスクロールしてください）。 「上へ」ボタンを押すと、ページ先頭に戻ります。 「200px下へ」を押すと、ページが少し下にスクロールします。
サンプル（別窓）
ページスクロールのスクリプト解説
では上記のソースについて見てみましょう。 最初の関数GoTop()の中ではscrollTo()が使われています。 これはページの指定位置にスクロールさせる命令文です。 括弧内は最初がX座標（横位置）、2つ目がY座標（縦位置）で、 横長のページでは横にもスクロールさせることができます。
2つ目の関数Down()の中では、scrollBy()を使用しています。 これは現在の位置から相対的にスクロールさせる命令文です。 括弧内はやはり最初が横位置、2番目が縦位置となります。 上に移動させたい場合は、2番目にマイナスの数値を記入すればOKです。
- scrollTo(X座標,Y座標)
- ページ内の指定位置にスクロールします。
- scrollBy(X方向の移動量,Y方向の移動量)
- 現在位置から相対的なポイントにスクロールします。