【JavaScript】戻ると進むのリンクの作り方

こんにちは朱夏です。

今回は、JavaScriptを使ってブラウザの戻ると進むのリンクを作ってみたいと思います。

この機能はブラウザの戻ると進むの2つと同じ機能を持ったリンクです。
それではいってみましょう。

実装サンプル

実装サンプルはこちらになります。

See the Pen
JjYryVK by 朱夏 (@syunatsu1)
on CodePen.

進むと戻る両方のリンクを一緒に書きました。

JavaScriptを分けて書きこむほどの量ではなかったのでHTMLのタグ内に直接書き込んでいます。

書き方

リファレンスによると、aタグのhrefに直接書き込む方法で良い様です。

コードはこちら。

/* 戻る */
<a href="javascript:history.back();">＜戻る＞</a>
/* 進む */
<a href="javascript:history.forward();">＜進む＞</a>

戻るの場合は「history.back()」、進む場合は「history.forward()」を使います。

あとがき

というわけで、JavaScriptでブラウザの戻る、進むのリンクを作る方法をしょうかいしてみました。

今回のまとめはこちら。

• HTMLに直接書ける文章量
• 戻る場合は「history.back()」
• 進む場合は「history.forward()」

進むと戻るはセットのイメージがあるので一緒に紹介しましたが、進むは基本的に使われる機会がほとんどない気がします。

今回は以上です。
次回もよろしくお願いします。