はじめに

ブラウザ上で「一つ前のページに戻る」機能を持たせたボタンの作り方を紹介します。

これはJavaScriptを使用しますが、JavaScriptといっても非常に簡単な記述で実装できます。

目次

リンクタグの場合

リンクタグaの場合、href=""にjavascript:history.back()を指定することで実装できます（これだけです）。

HTML

<a href="javascript:history.back()" class="c-btn_demo">前に戻るボタン</a>

できあがったもの

実際にクリックすると一つ前のページにジャンプします。

input buttonの場合

ボタンinputの場合は、onclick="history.back();"を記述することで実装できます。

HTML

<input type="button" onclick="history.back();" value="前に戻るボタン">

できあがったもの

実際にクリックすると一つ前のページにジャンプします。

おまけ

history.go()を使っても、history.back()と同じように一つ前のページに戻すことができます。

history.go()は履歴から特定のページを読み込むメソッドになりますが、()に値を入れることで先に進んだり前に戻ったりできます。

history.go(-1)なら一つ前に戻り、history.go(1)なら一つ先に進みます（history.forward()の前に進みます）

HTML

<a href="javascript:history.go(-1)" class="c-btn_demo">前に戻るボタン</a>

できあがったもの

実際にクリックすると一つ前のページにジャンプします。