【JavaScript】前のページへ戻るhistory.back()とhistory.go()の使い方

RELEASE / 2024.5.17 UPDATE / 2024.05.17

history.back()

history.go()

JavaScript

履歴

お問い合わせフォームなどで前のページへ戻るボタンを実装したいと思った時、JavaScriptを使うと簡単に実装することが出来ます。
この記事ではWebブラウザの履歴から前のページへ戻る方法をご紹介したいと思います。

この記事の目次を表示

1 前のページへ戻るhistory.back()とhistory.go()の使い方
- 1.1 history.back()メソッドの使い方
- 1.2 history.go()メソッドの使い方
2 まとめ

前のページへ戻るhistory.back()とhistory.go()の使い方

Webブラウザの履歴からひとつ前のページへ移動する方法にはhistory.back()メソッド、またはhistory.go()メソッドを使うことで実現出来ます。

それでは、それぞれの方法を見ていきましょう。

history.back()メソッドの使い方

Webブラウザの履歴からひとつ前のページへ戻るにはhistory.back()メソッドを使うことで実現出来ます。
history.back()メソッドの使い方はこちら。

<p><a href="javascript:history.back();">1つ前のページへ戻る</a></p>

実装サンプルはこちら。
ただし、Webブラウザの履歴に何もないので戻ることは出来ません。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

history.go()メソッドの使い方

Webブラウザの履歴からひとつ前のページへ戻るにはhistory.go()メソッドを使うことでも実現出来ます。
history.go()メソッドは引数を指定することで指定した数値分だけページを移動ことが出来ます。

先ほどのhistory.back()メソッドの場合は、ひとつ前のページへしか戻ることは出来ませんでしたが、history.go()メソッドの場合は、引数に指定した数値分だけページを移動することが出来ます。

正の数値を指定した場合は、履歴を進み、負の数値を指定した場合は履歴を戻ります。

<p><a href="javascript:history.go(-1);">1つ前のページへ戻る</a></p>
<p><a href="javascript:history.go(-2);">2つ前のページへ戻る</a></p>
<p><a href="javascript:history.go(1);">1つ後のページへ進む</a></p>
<p><a href="javascript:history.go(2);">2つ後のページへ進む</a></p>

実装サンプルはこちら。
ただし、Webブラウザの履歴に何もないので進んだり戻ることは出来ません。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.