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

最終更新日：2023-06-03
公開日：2020-05-12

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

この記事のポイント

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

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

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

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

JavaScript コード例

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

記事一覧

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

JavaScript コード例

関連記事