HTMLで「戻るボタン」を作る方法を解説!

HTMLで「戻るボタン」を作る方法を解説します。JavaScriptの知識も少しは必要ですが、ほとんど要らなくてHTMLのみで戻るボタンを実装することができます。ここではaタグを用いた場合とbuttonタグを用いた場合の2パターン解説します。

コンテンツ [表示]

  1. 1HTMLで「戻るボタン」を作りたい
  2. 1.1history.back(引数)
  3. 2HTMLで「戻るボタン」を作る方法
  4. 2.1history.back()が効かない場合は?
  5. 3まとめ

HTMLで「戻るボタン」を作りたい

HTMLのみで戻るボタンを実装できたらとても便利です。ここではその実装方法と、実装時の注意点について解説します。

解説する前に簡単にここで用いるJavaScriptの知識を解説します。

history.back(引数)

戻るボタンを実装する際に必要となるJavaScriptの知識としては、history.back()のみです。

history.back()は一つ引数をとり、その引数には戻るページ数を設定します。例えば1つ前に戻りたい場合は、history.back(-1)です。2ページ前であればhistory.back(-2)です。この引数は適宜調整してください。

スマホで戻る操作
Photo byijmaki

では次の章からHTMLで「戻るボタン」の実装方法を順番に見ていきましょう。

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()が効かない原因とその対処方法については以下の記事で詳しく解説しています。

例えば、なぜreturnfalseとする必要があるのか、またbuttonのtypebuttonとする必要があるのかなどです。

history.back()を用いる際は必要な知識なので、ぜひ読んでおいてください。

あわせて読みたい
JavaScriptでhistory.back()が効かない原因を解説!のイメージ
JavaScriptでhistory.back()が効かない原因を解説!
JavaScriptでhistory.back()が効かない原因について解説します。このJavaScriptでhistory.back()が効かない問題はJavaScript初学者の誰しもが陥る問題だと思います。ここでその問題を解決しましょう。

まとめ

「戻る」ボタンはページ遷移が多いWEB使徒では非常に有用性が高いです。

今回の内容とhistory.back()が効かないときの対処方法が書かれている記事を合わせて、ぜひ工夫して使ってみてください。

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次