JavaScript

レシピ

ブラウザ

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

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

この記事のポイント

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

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

現在のページから前後のページへ移動したいときは、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イベントを設定しています。
上記のコードをブラウザで開くと次のように表示され、それぞれのボタンを押すと前後ページへ移動します。

ブラウザの表示例
ブラウザの表示例

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

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

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