【HTML・JavaScript】戻るボタンの作り方｜history.back()と進む操作の注意点

更新日：2026年11月3日 / 投稿日：2023年08月27日

Webサイトに「前のページへ戻る」ボタンが必要になり、作り方に迷ったことはありませんか？この記事では、HTMLとJavaScriptを使った基本のコードから、うまく戻れないときの確認ポイントまで解説します。

HTMLで「戻る」ボタンを作り、ブラウザーの履歴を1つ戻るには、JavaScriptの history.back() を使います。最小のコードはこちらです。

<button type="button" onclick="history.back()">前のページに戻る</button>

このボタンを押すと、現在のタブの1つ前の履歴へ移動します。戻れる履歴がなければ、何も起こりません。また、直前に見ていたページが外部サイトなら、そのサイトへ戻る場合があります。 MDN：History.back()

「必ず記事一覧へ戻す」など、移動先を決めたい場合は、そのURLを指定したリンクを使います。この記事では、履歴を戻る方法と、決まったページへ移動する方法を分けて紹介します。

1つ前の履歴に戻る方法

先ほどのコードは、HTMLでボタンを表示し、クリック時にJavaScriptを実行しています。HTMLだけに「ブラウザーバックする」という専用の属性があるわけではありません。

button：ボタンを表示する要素
type="button"：フォーム送信やリセットを行わないボタンにする指定
onclick="history.back()"：クリックしたときに履歴を1つ戻る処理

フォーム内に置く場合も、戻るボタンには type="button" を明記しましょう。通常のフォーム内で type を省略したボタンや type="submit" のボタンは、フォーム送信を起こすことがあります。type="reset" は入力内容を初期値へ戻すための指定です。 WHATWG：button要素

なお、ここでの「1つ前」は、履歴上の1段階前です。ページ内のハッシュ移動などが履歴に追加されていると、同じページ内へ戻ることもあります。 WHATWG：Historyインターフェイス

2つ前の履歴へ戻る方法

戻る段階数を指定する場合は、history.go() を使います。

<button type="button" onclick="history.go(-2)">2つ前に戻る</button>

history.go(-2) は2つ前、history.go(-1) は1つ前の履歴へ移動します。正の数を指定すると履歴を先へ進みます。指定した位置に履歴がない場合は移動しません。 MDN：History.go()、 WHATWG：Historyインターフェイス

history.back() に戻る段階数を指定する引数はありません。2つ前に戻るつもりで history.back(-2) と書かず、history.go(-2) と書きましょう。 MDN：History.back()

履歴を1つ進む方法

ブラウザーの「進む」に相当する操作には、history.forward() を使います。

<button type="button" onclick="history.forward()">履歴を1つ進む</button>

例えば、AページからBページを開き、ブラウザーの「戻る」でAへ戻ったとします。このときAで history.forward() を実行すると、履歴に残っているBへ進めます。先の履歴がない場合は何も起こりません。 MDN：History.forward()、 WHATWG：Historyインターフェイス

フォームの「確認画面へ進む」や、記事の「次の記事へ」の移動先は、このメソッドでは指定できません。決まったページへの移動にはリンク、入力内容を送る処理にはフォームの送信機能など、目的に合った仕組みを使います。

決まったページへ戻したい場合はリンクを使う

「記事一覧へ戻る」「トップページへ戻る」など、行き先が決まっている場合は、a 要素の href にURLを指定します。例えば、同じサイトのトップページに移動するコードは次のとおりです。

<a href="/">トップページへ戻る</a>

この例の / は、そのサイトのルートを指します。サブディレクトリにサイトを設置している場合や記事一覧へ移動する場合は、目的のページのURLに置き換えてください。リンクは履歴の有無に依存せず、JavaScriptを使わずに移動できます。 MDN：a要素

履歴を戻るボタンを設ける場合も、戻れないときの選択肢として固定URLへのリンクを並べられます。

<button type="button" onclick="history.back()">前のページに戻る</button>
<a href="/">トップページへ</a>

この例は利用者が移動先を選ぶ形です。履歴の有無を判定して、自動的にトップページへ切り替えるコードではありません。

aタグを使う場合はリンク本来の動作に注意

既存のコードで a 要素を使っている場合は、クリック時のJavaScriptに加えて、リンク先へ移動する標準動作があることに注意しましょう。href="#" は空のフラグメントへのリンクとなり、ページ先頭への移動を起こします。 MDN：a要素

onclick で標準動作を止める場合、return false; は必ず属性値の引用符の中に書きます。

<!-- 既存のaタグを修正する場合の例 -->
<a href="#" onclick="history.back(); return false;">前のページに戻る</a>

onclick="history.back()" return false; のように引用符の外へ置いても、return false; はJavaScriptとして実行されません。上の修正例では、クリックイベントのハンドラーから false を返し、リンクの標準動作を取り消しています。 WHATWG：イベントハンドラーの処理

ただし、このリンクはJavaScriptが動かないとブラウザーバックできません。新しく履歴操作のUIを作るなら、冒頭の button type="button" を基本にすると、操作の意味が伝わりやすくなります。 MDN：a要素のアクセシビリティ

HTMLとJavaScriptを分けて書く方法

処理が増えてきたら、addEventListener() でクリック時の処理を登録できます。次の例では、ボタン要素を取得できるように、その後ろにスクリプトを置いています。

<button type="button" id="back-button">前のページに戻る</button>

<script>
  const backButton = document.getElementById("back-button");

  function goBack() {
    window.history.back();
  }

  backButton.addEventListener("click", goBack);
</script>

window.history.back() と history.back() は、この例では同じ履歴操作を呼び出します。 MDN：History.back()の実装例

なお、addEventListener() で登録した関数に return false; と書くだけでは、リンクの標準動作は止まりません。リンクのクリックを扱う場合は、受け取ったイベントに対して event.preventDefault() を呼び出します。上の例は通常のボタンなので、この処理は不要です。 MDN：Event.preventDefault()

戻るボタンが動かないときに確認すること

戻れる履歴があるか

新しいタブでURLを直接開いた場合など、そのタブに戻れる履歴がなければ、history.back() を押しても移動しません。まず別ページから対象ページへ移動して試してみましょう。 MDN：History.back()

history.length は現在のページを含む履歴の件数です。戻れる件数や、戻り先のURLを表す値ではありません。例えば、履歴の先頭まで戻っていても、先の履歴が残っていれば件数は2以上になります。したがって、history.length > 1 だけでは「戻れる」「同じサイト内へ戻れる」とは判断できません。 MDN：History.length

フォーム送信やリンクの動作が起きていないか

ボタンの type="button" が抜けていないか確認します。a 要素を使っている場合は、href による移動を止める必要があるか、return false; の位置が正しいかも確認しましょう。

JavaScriptが実行されているか

開発者ツールのコンソールで、JavaScriptのエラーや、CSP（Content Security Policy）による実行拒否が出ていないか確認します。CSPの設定によっては、onclick やページ内の <script> が実行されません。その場合は、サイトで許可された外部JavaScriptファイルなどから処理を登録する必要があります。サンプルを動かすためだけに、セキュリティ設定を緩めないようにしましょう。 MDN：CSPのscript-src