「履歴」と「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>
同じカテゴリーのコンテンツ
