記事内に広告が含まれています。

【JavaScript】戻るボタン・進むボタンの作り方

JavaScriptにおける戻るボタン・進むボタンの作り方です。

【スポンサーリンク】

戻るボタンの作り方

簡単な話、「onClick=”history.back();”」を記載すれば遷移元のページに戻れるので、ボタンに付与してあげます。

<input type=”button” Value=”戻る” onClick=”history.back();”>

こんな感じに「戻る」ボタンが作成され、クリックすると1つ前のページに戻れます。


history.back() の他にも、「history.go(-1);」でも遷移元のページに戻ることが可能です。

<input type=”button” Value=”戻る” onClick=”history.go(-1);”>

どちらでも動きは同じです。

2ページ前に戻りたい場合は、

<input type=”button” Value=”戻る” onClick=”history.go(-2);”>

と書けば2ページ前に戻ります。

【スポンサーリンク】

進むボタンの作り方

進むボタンの場合、「onClick=”history.forward();”」を記載すれば、1つ先のページに遷移します。

<input type=”button” Value=”進む” onClick=”history.forward();”>

こんな感じに「進む」ボタンが作成され、クリックすると1つ先のページに進めます。


「history.go(1);」でも同じです。

<input type=”button” Value=”進む” onClick=”history.go(1);”>

2ページ先に進みたい場合は、

<input type=”button” Value=”戻る” onClick=”history.go(-2);”>

と書けば2ページ先に進みます。

.