ウェブページ内の特定の座標にスクロールさせる方法： 絶対座標のscroll(X,Y) と移動量のscrollBy(X,Y)

JavaScriptを使うと、ウェブページ内の特定の座標に強制的にスクロールさせることができます。

わざわざJavaScriptを使うまでもなくHTML側でページ内リンクを作っておけば、ページ中の特定の位置に移動(スクロール)させることはできます。しかし、JavaScriptでスクロールさせる場合は、スクロール先の位置として座標(X座標・Y座標)を指定できますから、あらかじめ「スクロール先を特定する目印」などを用意しておく必要がありません。また、「現在の表示位置からの相対的な移動量」を指定してスクロールすることもできるので、半画面ずつ何度もスクロールする、といった処理も可能です。

特定の座標へスクロールさせるには、scrollメソッドを使って以下のように記述するだけです。とても簡単です。

window.scroll( 240, 360 );

上記の場合は、「X座標(横)：240，Y座標(縦)：360」の位置にスクロールします。
ウェブページの左上の座標を「0,0」です。
X座標は横方向、Y座標は縦方向を指します。横スクロールが不可能な場合はX座標の指定は無視され、縦スクロールが不可能な場合はY座標の指定は無視されます。

現在の位置を基準にして相対的に移動させるには、scrollByメソッドを使って以下のように記述します。

window.scrollBy( 120, 300 );

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

半画面分ずつスクロールする機能を作る

たとえば、scrollByメソッドを使うことで「画面の半分のサイズだけスクロールさせる」機能を作ったりできます。
例えば、以下のような感じでJavaScriptソースを書きます。

function ScrollHalfHeight() {
   window.scrollBy( 0, screen.height/2 );
}

上記では、ScrollHalfHeight関数を作成しています。
scrollByメソッドの第1引数は「0」なのでX座標(横方向)の移動はしません。
第2引数には「screen.height/2」と指定しています。これは、閲覧者が利用している画面の高さの半分を計算しています。
この関数を、以下のようにボタンのonclick属性から呼び出せば……、

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

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

まあ、ボタンで呼び出してしまうと、ボタンも一緒にスクロールしてしまうのであんまり意味はないですけどもね……。(^_^;;;
ボタンだけは常時表示されるようなスタイルを作っておけば、長文を読ませるようなページではもしかしたら使えるかも知れません。

アンカーポイントなしで、ページの最上部に戻るリンクが作れる

scrollメソッドの引数(座標)に「 0,0 」を指定すれば、ページの最上部に戻る機能を作れます。
ページの最上部に戻るリンクは、様々なウェブサイトでよく見かけます。特にモバイル端末のような「画面が狭くてスクロールバーがない」環境では便利です。

ボタンの場合： <input type="button" value="ページの最初に戻る" onclick="window.scroll(0,0);">

リンクの場合： <a href="#" onclick="window.scroll(0,0); return false;">ページの最初に戻る</a>

座標[0,0]は、ウェブページの左上端のことですから、このボタンやリンクをクリックすると、ページの最初の位置に戻れます。
座標をして移動できるので、ページの最上部にあらかじめ#topのようなアンカーポイントを作っておく必要がないメリットがあります。
実際に表示させてみると以下の通りです。

ただ、この方法での移動は、HTMLのページ内リンクなどと同じように一瞬です。
同一ページの内部で移動する場合は、多少のアニメーション効果を伴って移動する方が分かりやすいですよね。
jQueryを使うことで、スクロールアニメーション効果を伴ってTOPへ移動するボタン(リンク)を作る方法を、All Aboutで解説しました。よろしければ、記事『スクロールによってTOPへ戻るボタンを表示させる方法』をぜひご参照下さい。

(更新日：2017年06月09日)