前のページに戻るとページトップに戻るの併用方法

質問

ホームページのページ内に前のページに戻るボタンとページトップ（同ページの最上部）に戻るボタンの両方をJavaScriptで設置したいのですが、方法がわかりません。

前のページに戻るは
<a href="javascript:history.back()">戻る</a>
としています。

ページトップ（同ページの最上部）に戻るは
<a href="javascript:scrollTo(0,0);undefined;" onclick="return false;">ページトップに戻る</a>
としています。

以上の両方を併用する方法を教えていただけないでしょうか？
よろしくお願いします。

回答No.2

my-- · ベストアンサー

アンカーを利用したページ内の移動で履歴を残したくないってことですよね。
javascriptで移動処理をしてやるしかないのでは。

//ここから
function cancel(e) {
if (window.event) {
event.cancelBubble = true;
event.returnValue = false;
} else if (e && e.preventDefault && e.stopPropagation) {
e.preventDefault();
e.stopPropagation();
}
return false;
}

function fragmentAnchor(e) {
var h, targetElm, every, p, n;
var elm = e.target || e.srcElement;
if (elm.tagName != 'A') return;
if ((p = (h = elm.href).lastIndexOf('#')) <= 0) return;
h = h.substring(p + 1, h.length);
if ((targetElm = document.getElementById(h)))
scrollTo(0, targetElm.offsetTop);
else {
every = document.body.getElementsByTagName('*');
n = every.length;
for (var i = 0; i < n; i++) {
if (every[i].name == h) {
scrollTo(0, every[i].offsetTop);
every = null;
break;
}
}
if (every != null) return;
}
return cancel(e);
}

function backToTop(e) {
var elm = e.target || e.srcElement;
if (elm.className != 'back' && elm.className != 'top') return;
if (elm.className == 'back') history.back();
else scrollTo(0, 0);
return cancel(e);
}

if (document.addEventListener) {
document.addEventListener('click', backToTop, true);
document.addEventListener('click', fragmentAnchor, false);
}
else {
document.attachEvent('onclick', backToTop);
document.attachEvent('onclick', fragmentAnchor);
}
//ここまで

ページ内の移動で履歴を残さなくなるはずです。たぶん。

<p><a href="#" class="top">ページトップに戻る</a></p>
<p><a href="before.html" class="back">戻る</a></p>

こちらは履歴がないとただのお飾りになってしまいますが、割り切ってしまえるなら。

お礼

ありがとうございます。
早速試してみた結果、ページ内で移動した後に前のページに戻ることはできないようです。直接前のページのURLを指定しないと無理みたいですね。

回答No.1

yambejp

>併用する

併用ってどういうことでしょうか？
とりあえずこんな感じでどうでしょう？

<a href="#" onclick="window.history.back();return false;">戻る</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#" onclick="window.scrollTo(0,0);return false;">ページトップに戻る</a>

補足

早速回答ありがとうございます。

>併用ってどういうことでしょうか？
１つのページで両方使うって言いたかったんです。

>とりあえずこんな感じでどうでしょう？
さっそく試してみました。
結果、ページトップに戻るを押した後、戻るで１つ前のページに戻ることができました。しかし、もう１つの壁にぶつかってしまいました。
ページ内でジャンプできるようにしているのですが、そのジャンプ以降だとジャンプする前の場所に戻ってしまいます。それも克服することは可能でしょうか？
よろしくお願いします。