現在のページの前ページ・次ページに移動する

現在表示しているページの前後ページに移動する方法を解説します。

この記事のポイント

閲覧履歴をもとに前後のページへ移動する
もし履歴がない場合は何も起こらない

履歴をもとに前後のページへ移動する

現在のページから前後のページへ移動したいときは、Historyオブジェクトのbackメソッド、またはforwardメソッドで移動することができます。
これらのメソッドは履歴をもとに移動しますが、もし前後ページの履歴がない場合はメソッドを実行しても何も起こりません（再読み込みもなし）。

以下のコードは「前のページへ」ボタンを押すと前のページへ移動するhistory.backメソッドが実行され、「次のページへ」ボタンが押されるとhistory.forwardメソッドが実行されます。

コード例

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

			// 前のページへ移動
			document.getElementById('btn-back').addEventListener('click', () => {
				history.back();
			});

			// 次のページへ移動
			document.getElementById('btn-forward').addEventListener('click', () => {
				history.forward();
			});
		});
	</script>
</head>
<body>
<h1>JS Test</h1>
<button id="btn-back">前のページへ</button>
<button id="btn-forward">次のページへ</button>
</body>
</html>

2つのボタンはそれぞれid属性でclickイベントを設定しています。
上記のコードをブラウザで開くと次のように表示され、それぞれのボタンを押すと前後ページへ移動します。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

履歴をもとに前後のページへ移動する

コード例

こちらの記事は役に立ちましたか？

関連記事