【HTML】戻るボタンでブラウザバックをする方法と次のページに進む方法

お問合せフォームでは、確認画面に進む際、入力をし直す際に「戻る」ボタンが付いている事が多いですね。

戻るボタンはクリックをするとブラウザバックするような仕組みなっています。

今回はHTMLで戻るボタンを作り、ブラウザバックをさせる方法や、逆に次へボタンを作る方法をご紹介していきます！

ブラウザバックには「history.back()」を使用します

HTMLで1つ前のページに戻る機能を実装するには、「history.back()」使用する事で実現できます。

また、ボタンにはaタグの他にbuttonタグやinputタグでも大丈夫です。

具体的には以下のようにHTMLを作ります。

<a href="" onclick="history.back()">戻る</a>
<button type="button" onclick="history.back()">戻る</button>
<input type="button" onclick="history.back()" value="戻る">

上記のコードに「onclick属性」を使い、値に「history.back()」を入れる事で実装ができます。

また、2つ前に戻る等、指定をしたい場合には以下のようにHMTLにします。

<a href="" onclick="history.back(-2)">戻る</a>

aタグでhistory.back()が効かない場合にはreturn falseを設定します

aタグのhref属性に「#」を入れている場合、history.back()が効かない時があります。

そんな時には、HTMLに「return false」を入れます。

<a href="#" onclick="history.back()" return false;>戻る</a>

また、aタグのその他にbuttonタグのtype属性が「button」以外の時にもhistory.back()が効かない時がありますので、注意が必要な場合もあります。

次へボタン場合には「history.forward()」を使用します

今度は、前に戻るとは逆に「次へ」ボタンを作成する方法を紹介していきます。

次へボタンはhistory.forward()を使用すれば実装ができます。

以下のようなHMTLを作成します。

<a href="#" onclick="history.forward()">次へ</a>
<button type="button" onclick="history.forward()">次へ</button>
<input type="button" onclick="history.forward()" value="次へ">

次へボタンも、戻るボタンと同様に、onclick属性に値を入れる事で実装ができます。

関数で呼び出す事も可能です

以下のように、関数にして前に戻るや次に進むボタンのコードを呼び出す事もできます。

その場合は、以下のように記述します。

<button onclick="goBack()">前のページに戻る</button>

<script>
	function goBack() {
	window.history.back();  //もしくはhistory.forward()
	}
</script>

まとめ

HTMLで「戻る」ボタンと、「次へ」ボタンの作り方をご紹介いたしましたが、いかがだったでしょうか？

作り方は簡単ですので、もし機会があれば是非やってみましょう！