[解決済み] ブラウザの更新時に自動的にスクロールしないようにする
2022-11-19 10:27:55
質問
あるページにアクセスし、スクロールした後に更新すると、ページは元の場所に更新されます。これは素晴らしいことですが、これはURLにアンカー位置があるページでも発生します。例えば、リンクをクリックした場合です。
http://example.com/post/244#comment5
をクリックし、周りを見た後にページをリフレッシュすると、アンカーにおらず、ページがあちこちにジャンプしてしまいます。javascriptでこれを防ぐ方法はないのでしょうか?何があっても常にアンカーに移動するように。
どのように解決するのですか?
この解決方法は、ブラウザの動作が変化したため、推奨されなくなりました。他の回答を参照してください。
基本的に、アンカーが使用されている場合、私たちはウィンドウのスクロール イベントにバインドします。最初のスクロール イベントは、ブラウザによって行われる自動的な再配置に属するものでなければならないという考えです。これが発生した場合、私たちは独自の再配置を行い、その後、バインドされたイベントを削除します。これにより、その後のページ スクロールでシステムが失敗するのを防ぐことができます。
$(document).ready(function() {
if (window.location.hash) {
//bind to scroll function
$(document).scroll( function() {
var hash = window.location.hash
var hashName = hash.substring(1, hash.length);
var element;
//if element has this id then scroll to it
if ($(hash).length != 0) {
element = $(hash);
}
//catch cases of links that use anchor name
else if ($('a[name="' + hashName + '"]').length != 0)
{
//just use the first one in case there are multiples
element = $('a[name="' + hashName + '"]:first');
}
//if we have a target then go to it
if (element != undefined) {
window.scrollTo(0, element.position().top);
}
//unbind the scroll event
$(document).unbind("scroll");
});
}
});
関連
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] JavaScriptでページの一番上までスクロールする?
-
[解決済み] Firefox または Chrome ブラウザから HTTP POST リクエストを手動で送信する方法
-
[解決済み] HTMLページでスクロールバーを非表示にする
-
[解決済み] HTMLでページ更新時にページのスクロール位置を強制的にトップにする
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTMLでページ更新時にページのスクロール位置を強制的にトップにする
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] javascript includes() 大文字小文字を区別しない
-
[解決済み] CORS: 認証モードは 'include' です。
-
[解決済み] querySelectorAllがない場合、ライブラリを使用せずに属性で要素を取得する?
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる
-
[解決済み] これは純関数ですか?
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ