JavaScriptでページを上下にスクロールさせる方法について解説

HOME
更新日:2014.11.02
HOMEJavaScript入門 > スクロール

スクロール

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

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

では、以下のスクリプトを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方向の移動量)
現在位置から相対的なポイントにスクロールします。