NO.114 ウィンドウ�C

ウィンドウの操作�B

ウィンドウを絶対値でスクロール - window.scrollTo(X値,Y値)

scrollTo(X値,Y値)で決められた座標位置にスクロールします。
横スクロールするページは嫌われるので、ゲームを作るのでもない限りはなるべくX値は指定しなくてもいいようにしましょう。
<script type=text/javascript> <!-- function js1a(){window.scrollTo(0,0);} function js1b(){window.scrollTo(0,1000)} --> </script> <input type=button value="ページ最上部に移動"onClick="js1a()"> <input type=button value="ページ最下部に移動"onClick="js1b()">


上記の例でページの指定した位置にスクロールするのは実質リンクの貼り方�Aでも同様の事が出来るので、
次に紹介するscrollBy(現在のX値±x,現在のY値±y)を使ってもっと動的に少しずつ動かした方が｢スクロール｣らしいかもしれません。
<script type=text/javascript> <!-- function js2a(){for(a=0;a<100;a++)window.scrollBy(0,-10);} function js2b(){for(a=0;a<100;a++)window.scrollBy(0,10)} --> </script> <input type=button value="ページ最上部に移動"onClick="js2a()"> <input type=button value="ページ最下部に移動"onClick="js2b()">

ウィンドウを相対値でスクロール - window.scrollBy(現在のX値±x,現在のY値±y)

scrollBy(現在のX値±x,現在のY値±y)は現在のページ位置に対して相対的にページをスクロールさせます。
こちらはインラインフレーム内で例を示した方が分かりやすそうですね・・・
<script type=text/javascript> <!-- function js3a(){for(a=0;a<10;a++)ir.scrollBy(0,-5);} function js3b(){for(a=0;a<10;a++)ir.scrollBy(-5,0);} function js3c(){for(a=0;a<10;a++)ir.scrollBy(5,0);} function js3d(){for(a=0;a<10;a++)ir.scrollBy(0,5);} function js3e(){ir.scrollTo(0,0);} --> </script> <table><tr><td><iframe src=index.html width=200 height=200 name=ir></iframe></td><td> <table><tr><td></td><td><input type=button value="↑"onClick=js3a()></td><td></td></tr> <tr><td><input type=button value="←"onClick=js3b()></td><td><input type=button value="●"onClick=js3e()></td><td><input type=button value="→"onClick=js3c()></td></tr> <tr><td></td><td><input type=button value="↓"onClick=js3d()></td><td></td></tr> </table></td></tr></table>