JavaScriptで簡単に作れる「戻る」ボタン実装ガイド｜履歴がない場合の対策も解説

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Web制作をしていると、「戻る」ボタンをページ内に配置したい場面って意外と多くないですか？

例えば、詳細ページやお問い合わせフォームの確認画面など、ブラウザ標準の戻る操作ではなく、サイトデザインに合わせたボタンを設置したいとき。

実はこの「戻る」ボタン、JavaScriptの history.back() を使えばたった1行で実装できるんです。
しかも、リンクタグやボタンタグどちらでもOK。

今回は、最もシンプルなコード例から、デザインを整えるCSS、注意点や応用テクニックまで、
まとめて紹介していきます。

基本：1行で書ける戻るボタン

もっともシンプルな方法は、JavaScriptの history.back() を直接呼び出す方法です。

<button onclick="history.back()">戻る</button> </code>

これだけで前のページに戻る機能が完成!

リンクタグにしたい場合は以下のように書き換えるだけです。

<a href="javascript:history.back()">戻る</a>

デザインを整えるCSS

シンプルなボタンを、サイトデザインに合わせて調整しましょう。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

注意点：戻れない場合の挙動

history.back() は 直前のページ履歴がある場合のみ機能します。

例えば、ブックマークや直接アクセスされた場合は戻れないため、トップページなどへのフォールバックリンクを用意すると安心です。

  if (history.length > 1) {
    history.back();
  } else {
    window.location.href = "/";
  }

まとめ

satokotadesignキャンペーン実施中！