<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> <!-- function go_back() { window.history.back(); } function go_forward() { window.history.forward(); } // --> </script> </head> <body> <a href="javascript:go_back();">戻る</a> <a href="javascript:go_forward();">進む</a> </body> </html>
<a href="javascript:history.back();">1つ前のページ</a> <a href="javascript:history.go(-1);">1つ前のページ</a> <a href="javascript:history.go(-5);">5つ前のページ</a>
<a href="javascript:history.forward();">1つ先のページ</a> <a href="javascript:history.go(+1);">1つ先のページ</a> <a href="javascript:history.go(+5);">5つ先のページ</a>
これらはブラウザの履歴を参照して1つ前のページや1つ先のページに移動します。history.go(n); として n に数値を指定すると、その数値の前や先のページに移動します。
なお、現在開かれているブラウザの履歴が無い場合や JavaScript が無効の場合は機能しないため、これらを考慮する場合は以下のようにします。
<a href="../index.html" onclick="if (history.length) { history.back(); return false; }">[戻る]</a>
このように、履歴の個数を history.length で取得して履歴があれば history.back(); を実行します。履歴が無い場合や JavaScript が無効の場合はアンカーに指定したリンクを表示します。