【JavaScript】ブラウザの戻るボタンと進むボタンを設定する

ブラウザの戻る・進むボタンをHTMLのボタンで表示し、画面の下部に固定したスマホ風UIを作成してみます。

HTML部分
CSS部分
JavaScript部分
まとめ

HTML部分

以下のように実装します。

<!-- ページコンテンツ -->

  <div class="navigation-buttons">
    <button onclick="history.back()">戻る</button>
    <button onclick="history.forward()">進む</button>
  </div>

ナビゲーションボタンを表示するためのコードです。

<div class="navigation-buttons">は、ナビゲーションボタンを含む要素で、CSSクラスnavigation-buttonsが適用されます。
<button onclick="history.back()">戻る</button>は、「戻る」ボタンを表します。このボタンがクリックされると、onclickイベントハンドラが呼び出され、history.back()メソッドが実行されます。このメソッドは、ブラウザの履歴を1つ前に戻らせます。
<button onclick="history.forward()">進む</button>は、「進む」ボタンを表します。このボタンがクリックされると、onclickイベントハンドラが呼び出され、history.forward()メソッドが実行されます。このメソッドは、ブラウザの履歴を1つ進めます。

このHTMLコードは、ページ下部にナビゲーションボタンを表示し、ボタンをクリックするとブラウザの履歴を操作できるようになります。

CSS部分

以下のように実装します。

.navigation-buttons {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #f0f0f0;
      display: flex;
      justify-content: space-around;
      padding: 10px;
      box-sizing: border-box;
    }

    .navigation-buttons button {
      background-color: #e0e0e0;
      border: none;
      color: #333;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      border-radius: 4px;
    }

.navigation-buttonsは、ナビゲーションボタンを含む要素に対するスタイルです。
- position: fixedで要素の位置を画面に固定し、bottom: 0とleft: 0で画面の下部左端に配置します。
- width: 100%で要素の横幅を画面いっぱいに広げます。
- background-color: #f0f0f0で要素の背景色を淡いグレーに設定しています。
- display: flexでフレックスボックスレイアウトを使用し、justify-content: space-aroundで子要素(ボタン)を等間隔で並べます。
- padding: 10pxで要素の内側に10pxの余白を設け、box-sizing: border-boxでpaddingとborderが要素の幅に含まれるようにしています。
.navigation-buttons buttonは、ナビゲーションボタン自体に対するスタイルです。
- background-color: #e0e0e0でボタンの背景色を淡いグレーに設定しています。
- border: noneでボタンの枠線を無くします。
- color: #333でボタンのテキスト色を濃いグレーに設定しています。
- padding: 10px 20pxでボタンの内側に上下10px、左右20pxの余白を設けています。
- text-align: centerでボタンのテキストを中央揃えにしています。
- text-decoration: noneでボタンのテキストからunderlineを削除しています。
- display: inline-blockでボタンをインラインブロック要素として扱います。
- font-size: 16pxでボタンのフォントサイズを16pxに設定しています。
- border-radius: 4pxでボタンの角を4pxの半径で丸めています。

このCSSコードを適用すると、画面の下部に淡いグレーの背景で等間隔に並んだナビゲーションボタンが表示され、ボタン自体は淡いグレーの背景色と丸みを帯びた角で、テキストは濃いグレーで中央揃えになります。スマホ風のシンプルでミニマルなUIデザインとなっています。

JavaScript部分

ページ読み込み時に戻る・進むボタンの状態を更新、ブラウザの履歴が変更された際にボタンの状態を更新します。

// ページ読み込み時に戻る・進むボタンの状態を更新
    window.onload = function() {
      updateNavigationButtons();
    }

    // ブラウザの履歴が変更された際にボタンの状態を更新
    window.addEventListener('popstate', function() {
      updateNavigationButtons();
    });

    function updateNavigationButtons() {
      var backButton = document.querySelector('.navigation-buttons button:first-child');
      var forwardButton = document.querySelector('.navigation-buttons button:last-child');

      backButton.disabled = !window.history.length;
      forwardButton.disabled = !window.history.forwardLength;
    }

updateNavigationButtons()関数は、実際にナビゲーションボタンの状態を更新する処理を行います。
document.querySelector()を使って、「戻る」ボタンと「進む」ボタンの要素を取得しています。
backButton.disabledとforwardButton.disabledを設定することで、ボタンの無効化/有効化を制御しています。
- !window.history.lengthは、履歴が1つしかない場合にtrueになり、「戻る」ボタンを無効化します。
- !window.history.forwardLengthは、履歴を進める余地がない場合にtrueになり、「進む」ボタンを無効化します。