ブログでもだいたい使えるHTMLタグリファレンス

簡単な JavaScript を使って、ウィンドウの表示内容をスクロールさせることができます。

※このサンプルは、インラインフレームで別ページをブログに埋め込んであります。

ページのスクロールに関連する JavaScript のメソッドおよびプロパティは、下記のようになります。

ウィンドウ名.scroll( X座標,Y座標 )	指定位置にスクロールする
ウィンドウ名.scrollTo( X座標,Y座標 )	指定位置にスクロールする
ウィンドウ名.scrollBy( X方向の移動量,Y方向の移動量 )	相対位置にスクロールする
ウィンドウ名.pageXOffset	横方向のオフセットを参照
ウィンドウ名.pageYOffset	縦方向のオフセットを参照

ウィンドウ名：スクロールさせるウィンドウの名前を指定します。省略可能です。
X座標/Y座標： scroll メソッドおよび scrollTo メソッドは、ここで指定した座標位置にスクロールしてページ内容を表示します。
X方向の移動量/Y方向の移動量： scrollBy メソッドは、現在の表示開始位置から、ここで指定した移動量だけ軽視位置を移動させます。値は、ピクセル値です。
負数(マイナスの値)を指定すると、逆方向に移動します。ただし、ページのサイズを超えた値を指定すると無効になりますので、スクロールバーで移動できる範囲を指定する必要があります。
pageXOffset/pageYOffset：このプロパティは、現在の表示開始位置を返しますので、どの位置までスクロールされているか調べたいときに使用します。

このサンプルページのソースは、下記のようになります。

<html>
<head>
<title>ブログでもだいたい使えるHTMLタグリファレンス-動物大好き-</title>

<SCRIPT LANGUAGE="JavaScript">
<!--
count = 0 ;scrly = 5 ;scrollStart() ; //初期値を指定してタイマー関数を呼び出します

function scrollStart() {

CountTimer = setInterval( "scroll()", 50 ); }
　//50ミリ秒ごとにスクロールのための関数を呼び出します

function scroll() {

if ( count < 124 ) { scrollBy( 0 , scrly ) ; count++ ; }
else { clearInterval( CountTimer ) ;　//指定回数スクロールしたらタイマーを解除し、スクロール量の正負を反転させて再びタイマー関数を呼び出します
count = 0 ; scrly = 0 - scrly ;
scrollStart() ; }
}

//-->
</SCRIPT>

<style type="text/css">

</style>
</head>

<body>
<img src="Pteromys_volans.jpg"><br>
<img src="Hologale_parvula.jpg"><br>
<img src="Sciurus_lis.jpg"><br>
<img src="Phascolarctos_cinereus.jpg"><br>
<img src="Callosciurus_prevosti.jpg">
</body>
</html>

本サンプルは、この別ページをインラインフレームでブログ内に表示しています。ソースは、次のようになっています。

※このサンプルは、インラインフレームで別ページをブログに埋め込んであります。
<iframe src="sample/animals/animals.html" scrolling="no" frameborder="no" width="210" height="160">

このページは、インラインフレームを使用しています。<br>
→<a href="sample/animals/animasl.html" target="_blank">こちらからどうぞ</a>

</iframe>

タイマー関数について詳細はこちらから。→JavaScriptを使ってクッキングタイマーを作る
インラインフレームについて詳細はこちらから。→インラインフレームを表示する

ランキングに参加中です! お役に立てたらクリックをお願いします→

ブログでもだいたい使えるHTMLタグ リファレンス

ウィンドウをスクロールさせて表示する