[解決済み] ドキュメントをジャンプさせずにwindow.location.hashを更新するにはどうすればよいですか?
2022-04-20 16:44:38
質問
ホームページにスライドパネルを設置しています。
アニメーションが終了したら、ハッシュを以下のように設定しました。
function() {
window.location.hash = id;
}
(これはコールバックであり
id
が先に割り当てられています)。
これは、ユーザーがパネルをブックマークできるようにするためと、非JavaScriptバージョンが動作するために、うまく機能します。
しかし、ハッシュを更新すると、ブラウザがその場所にジャンプしてしまうのです。これは予想された動作なのでしょう。
質問ですが、これを防ぐにはどうしたらいいのでしょうか?つまり、どうすればウィンドウのハッシュを変更しても
ではなく
ハッシュが存在する場合、ブラウザはその要素までスクロールするのでしょうか?ある種の
event.preventDefault()
のようなものでしょうか?
jQuery1.4を使っていて、その中の scrollTo プラグイン .
ありがとうございます。
更新情報
以下はパネルを変更するコードです。
$('#something a').click(function(event) {
event.preventDefault();
var link = $(this);
var id = link[0].hash;
$('#slider').scrollTo(id, 800, {
onAfter: function() {
link.parents('li').siblings().removeClass('active');
link.parent().addClass('active');
window.location.hash = id;
}
});
});
解決方法は?
最新のブラウザで履歴APIを使用し、古いブラウザでフォールバックすることで、回避することができます。
if(history.pushState) {
history.pushState(null, null, '#myhash');
}
else {
location.hash = '#myhash';
}
クレジット レア・ヴェロウ
関連
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
jsを使った簡単な照明スイッチのコード
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryを使用しない$(document).ready相当
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
Vueの要素ツリーコントロールに破線を追加する説明
-
JavaScriptのクロージャの説明
-
vueが定義するプライベートフィルタと基本的な使い方
-
Vueのイベント処理とイベントモディファイアの解説
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
jq は html ページとデータを動的に分割する。
-
[解決済み] Twitter Bootstrapのタブ:ページの再読み込みやハイパーリンクで特定のタブに移動する
-
[解決済み] ページのスクロールを伴わないlocation.hashの変更