フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

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

history.back()
history.go()
JavaScript
履歴

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

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

前のページへ戻る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.

まとめ

いかがでしたか?
Webブラウザの戻るボタンを押した時と同じ挙動をするプログラムをJavaScriptで実装する方法をご紹介しました。