自動でスクロールする


ブラウザ
Internet Explorer Netscape Firefox Opera
参考
JavaScriptの基本

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

(例:サブウィンドウを自動でスクロールさせる)

サブウィンドウを開く


ソース

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

<html>
<head>
<title>TAG 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>TAG 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> 内にスクリプトを記述しておき、ページを開いたときにスクリプトを実行します。

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

【設定内容】

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

ページのスクロールは、

window.scrollBy(0, move)

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

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

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

window.scrollBy(move, 0)

サンプル

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