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

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

現役エンジニアがおすすめするプログラミングスクール!

自宅で学べるオンラインのプログラミングスクール【TechAcademy】

TechAcademyはオンライン完結型の受講タイプです。20以上の豊富なコースから好きなものを選択して学習できます。

メンターも質問にきちんと応じてくれて、第13回 日本e-Learning大賞、プログラミング教育特別部門賞ともに受賞しています。

Webアプリ、Webデザインのみならず、ブロックチェーンやデータサイエンス、動画作成のコースなど幅広いです。


無料相談はこちら!


Webデザインスクール「デジタルハリウッド STUDIO by LIG」

Web制作会社(株式会社LIG)が運営するスクールなので、より専門的なWebデザイン技術を身につけることが可能です。コンサルタントによる厚い転職支援もあるので、Webデザイナーとしての就職ができます。

未経験でも6ヶ月でWebデザイナーになれます。


無料相談はこちら!


テックキャンプ デザイナー転職(旧:【TECH::EXPERT】デザインスクール)

エンジニア転職に向いています。案件が獲得できなかった際は、全額返金保証してくれます。

家にいながら仕事がしたい、副業で収入をあげたい方向けです。


無料相談はこちら!


SkillHacks(スキルハックス) オンラインプログラミングスクール

ハッカソンや開発コンテストで優勝経験ありの実力派エンジニアからWebアプリケーションの開発手法のすべてを学べます。


無料相談はこちら!

ポートフォリオ制作実績

ウィンドウとフレームをスクロールするには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をコピーしました