にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

ウェブページ内の特定の座標にスクロールさせる方法 [操作・移動]

JavaScriptを使えば、ウェブページ内の特定の座標にスクロールさせられます。スクロール先に何らかの目印を用意する必要はなく、単に window.scroll(X,Y); の書式でX座標とY座標を記述するだけです。座標ではなく移動量を指定したい場合は、window.scrollBy(X,Y); のように記述します。これらのscrollメソッドやscrollByメソッドを使えば、ウェブページ内を縦横自在にスクロールさせられます。

ウェブページ内の特定の座標にスクロールさせる方法: 絶対座標の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ソースを書きます。

JavaScriptソース

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

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

HTMLソース

<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へ戻るボタンを表示させる方法』をぜひご参照下さい。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---