2007年5月29日(火) 12時31分27秒 [操作・移動]

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

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]は、ウインドウ左上端のことなので、このボタンをクリックすると、ページの最初に戻れます。
実際に表示させてみると以下の通り。