Learning site for website creation

「履歴」と「href」を使って戻るリンク

  • 投稿日:2019年11月12日
  • 更新日:2019年11月13日

要望

ブラウザの戻るボタンを使用した場合、一つ前に表示したページのスクロール位置が記憶されているため基本的に履歴で戻りたい。

一つ前のサイトが自サイトでない場合は「href」を使いたい。

なんらかの理由で「履歴」で戻れない時も「href」を使用する。

様々な状況が考えられるが、今回は簡易的に上記の要望をかなえたい。

方法

$(function() {
    /*---------------------------------
    history.back():状況に応じてhref使用
    class="historyback"を追記して利用
    ---------------------------------*/
    // リファラとホスト名が一致するか確認
    const REFERRER = document.referrer;
    let re = new RegExp(location.hostname, 'i');
    let refMatch = REFERRER.match(re) ? true : false;
    // historybackクラスクリック時の挙動
    $('.historyback').on('click', function() {
      if (refMatch) {
        history.back();
        setTimeout(function() {
          location.href = $(this).attr('href');
        }, 100);
      } else {
        location.href = $(this).attr('href');
      }
      return false;
    });
});

aタグにクラス名「historyback」を記述する。

<a class="historyback" href="index.html">トップページに戻る</a>