2020年06月08日

ホームページ上で戻るボタンを実装する方法

ホームページ上で戻るボタンを実装する方法

お世話になっております。SeekNextの佐藤です。
今回はホームページ上で戻るボタンの実装について書いていこうと思います。

どんな時に使用するのか?

Webサービスやアプリケーションの実装時が多い!?

基本的にはブラウザの標準機能に戻る機能がありますので、必要ないと思いますが、WebサービスやWebアプリではUIの問題で戻るボタンを意図的に実装したいということがあると思います。

実装方法

HTML

<p><a href="#" onclick="history.back(); return false;">戻る</a></p>

実装方法としてはこれだけです。記述が少ないので、HTMLに直接JavaScriptを記載していますが、もちろん分けることも可能です。

HTML(コードを分けるパターン)

<p><a href="#" class="backBtn">戻る</a></p>

JavaScript(コードを分けるパターン)

const backBtn = $('.backBtn');
backBtn.on('click', function () {
  history.back();
  return false;
});

以上、戻るボタンを実装する際は参考にしてみてください!