今回は1つ前のページに戻る（ブラウザバック）リンクの実装方法をご紹介したいと思います。
実はHtmlに属性を追加するだけで実装可能なので解説していきます。
HTMLのみサンプル
Htmlのみで実装するサンプルコードをご紹介します。
<!-- aタグを使いたい場合 -->
<a href="#" onclick="history.back()">戻る</a>
<!-- buttonタグを使いたい場合 -->
<button type="button" onclick="history.back()">戻る</button>これだけです！！
aタグを使うかbuttonタグを使うかはお好みの方を選んでください。
1点注意することがあれば、aタグを使う場合にはhref属性には#を指定してください。
ちなみに、あまり使う場面は少ないと思いますが、2ページ前に戻したい場合は下記のようにコードを編集すると2ページ前に戻ります。
<a href="#" onclick="history.back(-2);return false;">戻る</a>HTML + JavaScriptサンプル
ちなみにJavascriptを併用して実装することも可能です。
<!-- aタグを使いたい場合 -->
<a href="#" id="back-link">戻る</a>
<!-- buttonタグを使いたい場合 -->
<button type="button" id="back-link">戻る</button>// 戻る
const backLink = document.getElementById('back-link');
backLink.addEventListener('click', (e) => {
history.back(-1);
return false;
});まとめ
HTMLタグに属性を指定するだけでブラウザバックを実装できちゃいます。
Javascriptを併用したパターンも書きましたが、正直HTMLだけで完結させた方がいいです。( ´艸｀)
それでは。