Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:48.

特定の座標にスクロールさせる

JavaScriptを使うと、ページ内の特定の座標にスクロールさせることができます。
HTMLでページ内リンクを作っておけば(スクリプトを使わなくても)ページ中の特定の位置に移動(スクロール)させることができます。しかし、JavaScriptではX座標・Y座標を直接指定したり、現在の表示位置からの相対的な移動量を指定してスクロールさせることができます。

特定の座標へスクロールさせるには、以下のように記述します。

window.scroll( 240, 360 );

上記の場合は、「X座標:240,Y座標:360」の位置にスクロールします。X座標は横方向、Y座標は縦方向です。横スクロールが不可能な場合は、X座標の指定は無視されます。縦スクロールが不可能な場合は、Y座標の指定は無視されます。

現在の位置から相対的に移動させるには、以下のように記述します。

window.scrollBy( 120, 300 );

上記の場合は、現在表示されている位置から、右方向へ120ピクセル・下方向へ300ピクセル移動します。なお、負の値も指定可能で、その場合は左方向や上方向にスクロールできます。

これらの活用方法があんまり思い浮かばないんですが(^_^;)、たとえば、「画面の半分のサイズだけスクロールさせる」機能を作ったりできます。例えば、以下のような感じで。

<script type="text/javascript"><!--
   function ScrollHalfHeight() {
      window.scrollBy( 0, screen.height/2 );
   }
// --></script>

scrollByメソッドの第1引数は「0」なのでX座標の移動はしません。
第2引数には「screen.height/2」と指定しています。これは、画面の高さの半分を計算しています。
この関数を、以下のようにボタンから呼び出せば…

<input type="button" value="画面の半分のサイズだけスクロール" onclick="ScrollHalfHeight()" />

以下のように、画面の半分のサイズだけスクロールさせるボタンができあがります。

まあ、あんまり意味はないですけどね…。(^_^;;;
大きな画像を表示している場合で、画像内の特定の座標を示したいときに使え……るかな?(^_^;;;

ページの最上部に戻るボタンは、以下のようにすると作れます。

<input type="button" value="ページの最初に戻る" onclick="window.scroll(0,0);" />

座標[0,0]は、ウインドウ左上端のことなので、このボタンをクリックすると、ページの最初に戻れます。
実際に表示させてみると以下の通り。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど