• HTMLCSS

HTMLで前のページ・次のページへ戻るリンクボタンを実装する方法

HTMLタグだけで前のページ・次のページへ戻るリンクボタンを実装したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

実装サンプル

<!-- aタグ -->
<a href="#" onclick="history.back()">前のページへ戻る</a>
<a href="#" onclick="history.forward()">次のページへ進む</a>
<!-- buttonタグ -->
<button type="button" onclick="history.back()">前のページへ戻る</button>
<button type="button" onclick="history.forward()">次のページへ進む</button>

前のページ・次のページに戻るサンプルＨTMLコードです。

実装にはaタグもしくはbuttonタグを使います。

onclick属性を指定し、以下メソッドを指定します。

前のページへ戻るには以下メソッドを使用

onclick=”history.back()”

次のページへ進むには以下メソッドを使用

onclick=”history.forward()”

aタグを使う場合はhref属性に#を指定します。

以上で実装完了です。

まとめ

ＨTＭLタグに属性値を指定するだけでブラウザバッグを簡単に実装できます。

以上で解説を終わります。