HTMLで「戻るボタン」を作る方法を解説!
HTMLで「戻るボタン」を作る方法を解説します。JavaScriptの知識も少しは必要ですが、ほとんど要らなくてHTMLのみで戻るボタンを実装することができます。ここではaタグを用いた場合とbuttonタグを用いた場合の2パターン解説します。
HTMLで「戻るボタン」を作りたい
HTMLのみで戻るボタンを実装できたらとても便利です。ここではその実装方法と、実装時の注意点について解説します。
解説する前に簡単にここで用いるJavaScriptの知識を解説します。
history.back(引数)
戻るボタンを実装する際に必要となるJavaScriptの知識としては、history.back()
のみです。
history.back()
は一つ引数をとり、その引数には戻るページ数を設定します。例えば1つ前に戻りたい場合は、history.back(-1)
です。2ページ前であればhistory.back(-2)
です。この引数は適宜調整してください。
HTMLで「戻るボタン」を作る方法
ここではa
タグを用いた場合と、button
タグを用いた場合を解説しますが、方法は同じなのでまとめて解説します。
まずa
タグ、button
タグをそれぞれ用意し、その中にonclick
属性を付与し、onclick
属性にhistory.back()
を設定します。
それでは以下のコードを書いて、実際に「概要」リンクボタンを押した後に「戻る」ボタンを押して確認してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
display: block;
text-align: center;
}
section {
text-align: center;
}
</style>
</head>
<body>
<div>
<a href="#about" class="about">概要</a>
</div>
<div>
<section id="about">
<p>これは概要です。</p>
<!-- aタグ -->
<a href="#" onclick="history.back(-1);return false;">戻る</a>
<!-- buttonタグ -->
<button type="button" onclick="history.back()">戻る</button>
</section>
</div>
</body>
</html>
このようにHTML内だけで「戻る」ボタンを実装できているのが分かります。
history.back()が効かない場合は?
a
タグもしくはbutton
タグで、ブラウザによってはhistory.back()
が効かないときがあります。このhistory.back()が効かない原因とその対処方法については以下の記事で詳しく解説しています。
例えば、なぜreturn
をfalse
とする必要があるのか、またbuttonのtype
をbutton
とする必要があるのかなどです。
history.back()を用いる際は必要な知識なので、ぜひ読んでおいてください。
まとめ
「戻る」ボタンはページ遷移が多いWEB使徒では非常に有用性が高いです。
今回の内容とhistory.back()
が効かないときの対処方法が書かれている記事を合わせて、ぜひ工夫して使ってみてください。
では次の章からHTMLで「戻るボタン」の実装方法を順番に見ていきましょう。