Written by Kasumi

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>

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

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

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

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

onclick=”history.back()”

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

onclick=”history.forward()”

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

以上で実装完了です。

まとめ

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

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

目次

関連記事

HTMLCSS

【簡単CSS】複数の背景画像にパララックスを実装する方法【スマホ対応】

更新日:2022.12.31
9327
HTMLCSS

input:text要素をクリックした時の枠線をCSSで変更する方法

2022.05.04
1080
HTMLCSS

CSSで背景の半分だけ単色もしくは画像を指定する方法

2022.12.16
1005
HTMLCSS プログラミング

【CSS】input要素のplaceholderの文字だけサイズを変更する方法

2022.01.10
3525