JavaScript/ウィンドウ/自動でスクロールする

自動でスクロールさせるスクリプトです。

（例：サブウィンドウを自動でスクロールさせる）

ソース

■メインウィンドウのソース

<html>
<head>
<title>HTML index Webサイト</title>

<script type="text/javascript">
<!--

function disp(url){

	window.open(url, "window_name", "width=350,height=250,scrollbars=yes");

}

// -->
</script>

</head>
<body>

<p><a href="example_sub12.html" target="window_name" onClick="disp('example_sub12.html')">サブウィンドウを開く</a></p>

</body>
</html>

■サブウィンドウのソース

<html>
<head>
<title>HTML index Webサイト</title>

<script type="text/javascript">
<!--

// 設定開始（スクロールの動きを設定してください）

var speed = 100; // スクロールのスピード（1に近いほど速く）
var move = 5; // スクロールのなめらかさ（1に近いほどなめらかに）

// 設定終了


// 初期化
var x = 0;
var y = 0;
var nx = 0;
var ny = 0;

function scroll(){

	window.scrollBy(0, move); // スクロール処理

	var rep = setTimeout("scroll()", speed);

	// スクロール位置をチェック（IE用）
	if(document.all){

		x = document.body.scrollLeft;
		y = document.body.scrollTop;

	}
	// スクロール位置をチェック（NN用）
	else if(document.layers || document.getElementById){

		x = pageXOffset;
		y = pageYOffset;

	}

	if(nx == x && ny == y){ // スクロールし終わっていたら処理を終了

		clearTimeout(rep);

	}
	else{

		nx = x;
		ny = y;

	}

}

// -->
</script>

</head>
<body onLoad="scroll()">



</body>
</html>

解説

上記の例は、まずメインウィンドウ内のリンクでサブウィンドウを開き、そのサブウィンドウを自動でスクロールさせています。

※サブウィンドウを開くときの設定については、「サブウィンドウを開く」を参考にしてください。

【サブウィンドウ内の説明】

<head> ～ </head> 内にスクリプトを記述しておき、ページを開いたときにスクリプトを実行します。

// 設定開始～ // 設定終了の部分で、スクロールの動きを設定してください。

【設定内容】

スクロールのスピード … 1秒 = 1000 なので、デフォルトの 100 では 0.1秒に1コマ動くことになります。数値が小さいほどスピードは速くなります。
スクロールのなめらかさ … 1コマで移動する距離です。数値が小さいほど滑らかなスクロールになります。（スピードにも影響します）

ページが表示されたときに自動的にスクロールを開始するので、bodyタグに onLoad="scroll()" を指定しています。

ページのスクロールは、

window.scrollBy(0, move)

この部分で指定しています。

scrollBy() … 現在の位置から相対的にスクロールする指定

上記の設定部分を次のように変更すると、横にスクロールさせることができます。（0 と move を逆にします）

window.scrollBy(move, 0)

サンプル

青い文字の部分は、必要に応じて書き換えてください。