指定した位置にスクロールする

指定した分だけページをスクロールさせる方法について解説します。

この記事のポイント

縦横自由に移動できる
HTML要素の表示位置はgetBoundingClientRectメソッドで取得する

スクロール量を取得

ページを指定した分だけスクロールさせるには、windowオブジェクトのscrollToメソッドを使います。
以下の例では「コンテンツ3へ移動」ボタンを押すとコンテンツ3を表示する位置まで移動します。

ボタンを押すと…

コンテンツ3までスクロール

コードは次のようになります。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>JS Test</title>
	<script>
		window.addEventListener('load', (event) => {

			document.getElementById('button1').addEventListener('click', () => {

				// content3の表示位置を取得
				let content3 = document.getElementById('content3');
				let content_position = content3.getBoundingClientRect();

				// content3へ移動
				window.scrollTo( 0, content_position.top);

			});
		});
	</script>
	<style>
		#content1,
		#content2,
		#content3 {
			height: 300px;
			background-color: #ccc;
		}
		#content2 {
			background-color:#ddd;
		}
	</style>
</head>
<body>
<h1>JS Test</h1>
<button id="button1">コンテンツ3へ移動</button>
<div id="content1">コンテンツ1</div>
<div id="content2">コンテンツ2</div>
<div id="content3">コンテンツ3</div>
</body>
</html>

scrollToメソッドは第1引数に横の移動位置、第2引数に縦の移動位置を指定します。
よくWebサイトで「ページトップへ戻る」を押すとページ上部に移動する機能が設置されていることがありますが、原理としては同じメソッドを使って実現しています。

上のコードではまずコンテンツ3の表示位置をgetBoundingClientRectメソッドで取得し、topプロパティの値をscrollToメソッドに渡すことで移動機能を実装しています。
動作自体はアンカーリンクによる移動と同じです。

getBoundingClientRectメソッドは該当するHTML要素の表示位置やサイズを取得できる便利なメソッドで、ページの最上部を起点とした表示位置をtopプロパティ、左端を起点する表示位置はleftプロパティ、ページ下部を起点する表示位置はbottomプロパティ、右端を起点とする表示位置はrightプロパティから取得できます。