HTMLで戻るボタンを作る方法

Webブラウザには「戻る」「進む」ボタンがあり、押すと直前に閲覧していたページに戻ることができます。
Webブラウザは、ページ閲覧の履歴を持っているので、それを利用しているのです。

この記事では、この「戻る」動作を自分の作成したボタンで実現する場合の方法について解説します。

HTML+JavaScriptで戻るボタンを作る

HTMLのボタンにJavaScriptを記述することで「戻る」動作を作ることができます。

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

ちなみに「戻る」ほどは使う機会が無いかもしれませんが、逆に「進む」動作をする場合は以下のコードになります。

<button type="button" onclick="history.forward()">先のページへ進む</button>

onclick属性

onclickは、ボタンクリック時に実行するJavaScriptを指定するために利用します。

history.back()コマンド

historyオブジェクトはJavaSiptからブラウザの閲覧履歴へアクセスするために利用します。

複数回のバックを一度に行う方法

history.backの引数に数値を入れることで、直前だけでなく、別のページへも遷移できます。
例えば、「history.back(-2)」と指定した場合は2ページ戻ります。

リンク（aタグ）を使って戻るボタンを実現

HTMLで作るボタンではなく、画像でボタンを実現したいこともあると思います。
その場合は、リンクで使うaタグを利用して戻るボタンを実現することができます。

<a href="#" onclick="history.back(); return false;">前のページへ戻る</a>

ただし、最初に紹介したbutton要素で実行するのと異なる部分があるので、注意が必要です。

注意すべきポイントは次の2点です。

• hrefに「#」を指定する
• onclickに「return false;」を追加する

aタグは、ブラウザに対してページ遷移を行うために利用します。
リンクがクリックされた場合には、

1. onclickイベントがあればそれを実行する
2. hrefに指定したリンクへ遷移する

の順番で処理が実施されるため、1の処理結果に関わらず2のリンク遷移が起動してしまいます。

「onclick」の最後に「return false;」を記載することで、2の処理が行われるのを防止します。

このテクニックは様々な場合に応用できますので、ぜひ覚えておくと良いでしょう。

まとめ

HTMLでブラウザの「戻る」機能をボタンで再現する方法を紹介しました。

「戻る」ボタンを使いこなすと、Webページでより高度な動きができるようになります。
使い方に気をつける必要がありますが、是非活用してみてください。