スクロール－JavaScript入門

HOME
JavaScript入門
スクロール

ここでは、ページを上下にスクロールさせる方法について取り上げます。特定の位置にジャンプしてもらいたい時や、タイマーと組み合わせてスタッフロールを作ったりすることができます。

ページをスクロールさせる

では、以下のスクリプトを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><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>

//ページの先頭に戻る
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方向の移動量): 現在位置から相対的なポイントにスクロールします。

前へ次へ