【JavaScript】ウィンドウとフレームをスクロールする(scrollToとscrollBy)

この記事は約5分で読めます。

ウィンドウとフレームをスクロールするにはscrollToとscrollByを使ってプログラミングします。

.scrollToメソッドと.scrollByメソッドはピクセル単位で指定した位置へウィンドウの表示領域を移動させることができます。

スポンサーリンク

【JavaScript】ウィンドウとフレームをスクロールするソースコード

ウィンドウをスクロールするソースコード

1.<head></head>内のソースコード

<script type=”text/javascript”>
<!–
function SCLL(){
for(var i=0; i<150; i++){window.scroll(0,i)} for(i=149; i>=0; i–){window.scroll(0,i)}
}
//–>
</script>

function SCLL(){
 for(var i=0; i<150; i++){window.scroll(0,i)} 
 for(i=149; i>=0; i--){window.scroll(0,i)}
}

2.<body></body>内のhtmlソースコード

<br>はスクロールしたか分かるように、たくさん入力しましょう。

<p>
<form>
<input type=”button” value=” スクロールする ” onClick=”SCLL()”>
</form>
</p>
<br><br><br> ・・・ <br><br><br>

フレームをスクロールするソースコード

フレーム内のウィンドウを.scroll(x,y)メソッドのx軸に.setTimeout()メソッドで一定時間ごとにiの値を1ずつ加えながら代入することによってスクロールさせます。

横にスクロールさせたいので、改行させないようにする<nobr>タグを使ってプログラミングします。

<br>の逆の働きをします。

1.<head></head>内のソースコード

<script type=”text/javascript”>
<!–
var i = 0;
var MOZI = 3200;
var ST = 50;
function SCLL(){
for(i < MOZI){
i = i+2;
window.scroll(i,0);
}
setTimeout(“SCLL()”,ST);
}
//–>
</script>

fvar i = 0;
var MOZI = 3200;
var ST = 50;
function SCLL(){
 for(i < MOZI){
  i = i+2;
  window.scroll(i,0);
 }
setTimeout("SCLL()",ST);
}

2.<body></body>内のhtmlソースコード

<body onLoad=”SCLL()”>
<nobr>
<font size=5>
フレーム内のウィンドウをscrollメソッドのx軸にsettimeoutメソッドで一定時間ごとにiの値を1ずつ加えながら代入することによってスクロールさせます。横にスクロールさせたいので、改行させないようにするnobrタグを使ってプログラミングします。brの逆の働きをします。</font>
</nobr>
</body>

ブラウザを指定した位置までスクロールする

.scrollTo()メソッド

<script type=”text/javascript”>
<!–
function SRto1(){
window.scrollTo(100,100)
}
//–>
</script>

function SRto1(){
 window.scrollTo(100,100)
}

<div id=”STY1″ style=”position:absolute; left:200px; top:200px; width:1000px; height:1000px; background: Tan”>
<form>
<input type=”button” value=” スクロールする ” onClick=”SRto1()”>
</form>
</div>

.scrollBy()メソッド

<script type=”text/javascript”>
<!–
function SRby(){
window.scrollBy(-100,-100)
}
//–>
</script>

function SRby(){
 window.scrollBy(-100,-100)
}
//-->

<div id=”STY1″ style=”position:absolute; left:200px; top:200px; width:1000px; height:1000px; background: Tan”>
<form>
<input type=”button” value=” スクロールする ” onClick=”SRby()”>
</form>
</div>

 

スポンサーリンク

まとめ

スクロールのメソッドはJavaScript1.2以降使えるようになりました。

scrollToとscrollByはこちらのサイトでも紹介されています。

大学生の方もIT企業への転職やポートフォリオ作成に生かしてくださいね。

 

 

 

 

タイトルとURLをコピーしました