備忘録的プログラミングリファレンス

scroll()、scrollBy()、scrollTo() メソッド

Window.scroll()Window.scrollBy()Window.scrollTo()

 scroll()scrollBy()scrollTo() メソッドは、 指定されたページの位置にスクロールをして移動します。

 これらのメソッドはスクロール可能なページでなければスクロールはしません。

 scroll()scrollTo() メソッドは、web ページの全体の左上端が基準になります。絶対位置による指定と呼ばれます。

 scrollBy() メソッドは相対位置による指定で現在位置が基準になります。

 Window オブジェクトの指定には、現在の window を参照するや開いた親 Windown を参照するといった、以下のような関連するプロパティがあります。 詳しくはWindow プロパティ Exampleを参照してください

Windowプロパティ概要
selfWindow オブジェクト自信を取得
opener現在の Window を開いた Window を取得
topWindow の階層の最上位の Window の参照を取得
windowカレント Window オブジェクト
scroll()
指定位置にスクロール。scrollTo() に同じ
scrollBy()
指定数分をスクロール
scrollTo()
指定位置にスクロール

scroll() メソッド

Window.scroll()

 scroll() メソッドは、 指定されたページの位置にスクロールをして移動します。

 scrollTo() メソッドと同じ動きをします。

 scroll() メソッドは、web ページの全体の左上端が基準になります。絶対位置による指定と呼ばれます。

指定位置にスクロール
scroll(100, 100);
詳しくはExampleを参照してください

 スクロール可能なページでなければスクロールはしません。スクロールが可能になるとスクロールバーが表示されています。

ページ内 Index

Syntax

in JavaScript

 window.scrollBy();とも記述できます。

scroll( X, Y );
scroll( object );

引数(Parameter Values)

 スクロール位置を数値で指定します。単位はピクセルです。
 引数に連想配列(オブジェクト)を渡すこともできます。

引数概要
X水平方向の移動位置を数値で
Y垂直方向の移動位置を数値で
object連想配列(オブジェクト)で指定。値は以下を参照
objectの値
{ left=水平方向の移動位置。Xに同じ,
top=垂直方向の移動位置。Yに同じ,
behavior=['auto'|'instant'|'smooth'] }

'auto'..デフォルト。'instant'に同じ
'instant'.. 瞬時に移動
'smooth'.. 指定位置まで滑らかな描写

返り値(Return Values)

 返り値はないです。

Example

 scroll() メソッドの例です。
 以下のscroll() を実行ボタンをクリックするとこのページの指定位置にスクロールします。


scrollBy() メソッド

Window.scrollBy()

 scrollBy() メソッドは、 現在の位置から指定されたページの位置にスクロールをして移動します。水平方向と垂直方向の指定数分を移動します。

 指定数の単位はピクセルです。マイナスの値も指定できます。マイナスの値では基準方向に移動します。

 scrollBy() メソッドは相対位置による指定で現在位置が基準になります。

scrollBy()メソッド
scrollBy(100, -100);
詳しくはExampleを参照してください

 open() メソッドで開いた単独のフル画面表示ではないウィンドウが対象です。複数の Window をともなうタブ表示されたウィンドウやフル画面表示されたウィンドウは移動できません。

ページ内 Index

Syntax

in JavaScript

 window.scrollBy();とも記述できます。

scrollBy( X, Y );

引数(Parameter Values)

 スクロール量を数値で指定します。単位はピクセルです。
 引数に連想配列(オブジェクト)を渡すこともできます。

引数概要
X水平方向の移動量を数値で
Y垂直方向の移動量を数値で
object連想配列(オブジェクト)で指定。値は以下を参照
objectの値
{ left=水平方向の移動位置。Xに同じ,
top=垂直方向の移動位置。Yに同じ,
behavior=['auto'|'instant'|'smooth'] }

'auto'..デフォルト。'instant'に同じ
'instant'.. 瞬時に移動
'smooth'.. 指定位置まで滑らかな描写

返り値(Return Values)

 返り値はないです。

Example

 scrollBy() メソッドの例です。以下の確認ボタンをクリックしてください。新たな Window でページを開きます。
 そのページにあるscrollBy() を実行ボタンをクリックするとそのウィンドウが移動します。

scrollTo() メソッド

Window.scrollTo()

 scrollTo() メソッドは、指定されたページの位置にスクロールをして移動します。

 scrollTo() メソッドは、web ページの全体の左上端が基準になります。絶対位置による指定と呼ばれます。

指定位置にスクロール
scrollTo(100, 100);
詳しくはExampleを参照してください

 スクロール可能なページでなければスクロールはしません。スクロールが可能になるとスクロールバーが表示されています。

ページ内 Index

Syntax

in JavaScript

 window.scrollTo();とも記述できます。

scrollTo( X, Y );
scrollTo( object );

引数(Parameter Values)

 スクロール位置を数値で指定します。単位はピクセルです。
 引数に連想配列(オブジェクト)を渡すこともできます。

引数概要
X水平方向の移動位置を数値で
Y垂直方向の移動位置を数値で
object連想配列(オブジェクト)で指定。値は以下を参照
objectの値
{ left=水平方向の移動位置。Xに同じ,
top=垂直方向の移動位置。Yに同じ,
behavior=['auto'|'instant'|'smooth'] }

'auto'..デフォルト。'instant'に同じ
'instant'.. 瞬時に移動
'smooth'.. 指定位置まで滑らかな描写

返り値(Return Values)

 返り値はないです。

Example

 scrollTo() メソッドの例です。
 以下のscrollTo() を実行ボタンをクリックするとこのページの指定位置にスクロールします。