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で丸のドット下線を作成する方法【間隔・大きさを自由に変更】

2023.02.13
5692
HTMLCSS プログラミング

【html】audioタグでダウンロードをさせない方法。

2021.12.27
5449
HTMLCSS jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
2241
HTMLCSS

【HTML】selectタグを選択したらformをsubmit(送信)する方法

2023.08.31
658