ホームページのページ内に前のページに戻るボタンとページトップ(同ページの最上部)に戻るボタンの両方をJavaScriptで設置したいのですが、方法がわかりません。
前のページに戻るは
<a href="javascript:history.back()">戻る</a>
としています。
ページトップ(同ページの最上部)に戻るは
<a href="javascript:scrollTo(0,0);undefined;" onclick="return false;">ページトップに戻る</a>
としています。
以上の両方を併用する方法を教えていただけないでしょうか?
よろしくお願いします。
No.2ベストアンサー
- 回答日時:
アンカーを利用したページ内の移動で履歴を残したくないってことですよね。
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
- 回答日時:
>併用する
併用ってどういうことでしょうか?
とりあえずこんな感じでどうでしょう?
<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>
この回答への補足
早速回答ありがとうございます。
>併用ってどういうことでしょうか?
1つのページで両方使うって言いたかったんです。
>とりあえずこんな感じでどうでしょう?
さっそく試してみました。
結果、ページトップに戻るを押した後、戻るで1つ前のページに戻ることができました。しかし、もう1つの壁にぶつかってしまいました。
ページ内でジャンプできるようにしているのですが、そのジャンプ以降だとジャンプする前の場所に戻ってしまいます。それも克服することは可能でしょうか?
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Facebook 自分のフェイスブックのページに入れない。 1 2023/05/11 16:26
- 教えて!goo アンドロイド用の教えて!gooアプリの戻るボタンを押すと、勝手に自動で教えて!gooアプリが終了して 2 2022/09/24 07:47
- Excel(エクセル) マクロで作った ワードエクセル かけ線や コピペなど 修正や色々な方法を教えてください 2 2023/07/07 22:27
- InternetExplorer(IE) エッジに変わったらページが消える 4 2023/03/31 09:46
- Chrome(クローム) スマホのChromeはなぜ、進むボタンが無いのですか? 3 2023/02/07 23:36
- Android(アンドロイド) スマホ chromeの戻るボタンが機能しにくい スマホ(OPPO reno5A、Android12) 1 2022/09/11 20:39
- 教えて!goo アンドロイドでの、教えて!gooアプリ使用時のことです。 ページを戻る際に◁を押しますが、◁1タップ 2 2022/04/09 06:19
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- SEO 検索エンジン反映遅い 1 2022/06/04 07:35
- JavaScript JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えてほしいです 2 2023/08/25 21:43
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
window.openでタイトル名の指定
-
ホームページに日付を自動更新...
-
なぜ、ジャバスクリプトが表示...
-
javaで画像をランダム表示しつ...
-
document.writeで画面が消える
-
ActiveXobjectが作成できない
-
JavaScriptで決まった「時刻」...
-
C#テキストボックスの文字を配...
-
Boolean型配列中のTrueの有無を...
-
google apps scriptの終了のさせ方
-
関数でy=g(x)のgとは何の略です...
-
jspからjavascriptの変数引継ぎ
-
任意の座標をクリックさせるには
-
Linux バイナリ実行できない "...
-
javascriptでスロットゲームを...
-
javascriptでiframeのURL変更は?
-
javascript 特定のタグのidの存...
-
翌月を取得するGASが分かりません
-
ASP.NETのコントロールの値をJa...
-
VSCODE[Python]の設定について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openでタイトル名の指定
-
ホームページに日付を自動更新...
-
テキストボックスに入力された...
-
for文のiを使ってリンク先のア...
-
○歳△ヶ月と×日を計算してくれる...
-
引数を渡さずに呼び出し元の変...
-
なぜ、ジャバスクリプトが表示...
-
innerHTMLにて設定した情報を再...
-
前のページに戻るとページトッ...
-
更新でランダムでページ内のテ...
-
今日の月と日付の1週間後や3日...
-
「今日の日付けを画像で表示」...
-
java カレンダーの日付指定で...
-
文字列を点滅させたい
-
HTMLを記述しつつサブ窓(showM...
-
条件分岐(IF文)の簡素化
-
Java Scriptのメソッドについて
-
javascriptとphpの連携で疑問
-
現在の日付から、1ヶ月前にす...
-
この方法を教えてください。
おすすめ情報