[解決済み] ページのスクロールを伴わないlocation.hashの変更
2022-04-26 15:12:11
質問
ajaxを使ってコンテンツを読み込むページがいくつかあり、ページ内にディープリンクを貼る必要がある場合がいくつかあります。Users" "へのリンクを持ち、"settings" "をクリックするように指示する代わりに、次のページにリンクできると便利です。 ユーザー.aspx#settings
セクションへの正しいリンクを提供できるようにするため(テクニカルサポートなど)、ボタンがクリックされるたびにURLのハッシュを自動的に変更するように設定しました。 もちろん、唯一の問題は、これが起こるとき、この要素にページもスクロールされることです。
これを無効にする方法はありますか? 以下は、今のところ私が行っている方法です。
$(function(){
//This emulates a click on the correct button on page load
if(document.location.hash){
$("#buttons li a").removeClass('selected');
s=$(document.location.hash).addClass('selected').attr("href").replace("javascript:","");
eval(s);
}
//Click a button to change the hash
$("#buttons li a").click(function(){
$("#buttons li a").removeClass('selected');
$(this).addClass('selected');
document.location.hash=$(this).attr("id")
//return false;
});
});
を期待していたのですが
return false;
はページのスクロールを止めますが、リンクが全く機能しなくなるだけです。だから、今のところコメントアウトして、ナビゲートできるようにしています。
何かアイデアはありますか?
解決方法は?
かなり簡単な解決策を見つけたかもしれません。 問題は、URLのハッシュがスクロールされるページの要素でもあることです。ハッシュの前にテキストを追加すると、既存の要素を参照しなくなります。
$(function(){
//This emulates a click on the correct button on page load
if(document.location.hash){
$("#buttons li a").removeClass('selected');
s=$(document.location.hash.replace("btn_","")).addClass('selected').attr("href").replace("javascript:","");
eval(s);
}
//Click a button to change the hash
$("#buttons li a").click(function(){
$("#buttons li a").removeClass('selected');
$(this).addClass('selected');
document.location.hash="btn_"+$(this).attr("id")
//return false;
});
});
これで、URLは次のように表示されます。
page.aspx#btn_elementID
というのは、ページ上の本当のIDではありません。btn_"を削除して、実際の要素IDを取得します。
関連
-
[解決済み] テスト
-
[解決済み】JavaScriptでインラインIF文の書き方は?
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] jQueryを使用しない$(document).ready相当
-
[解決済み] JavaScriptでページの一番上までスクロールする?
-
[解決済み] スクロールした後に要素が表示されているかどうかを確認するには?
-
[解決済み] JavaScriptでwindow.location(URL)からハッシュを削除する方法 ページを更新せずに?
最新
-
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がechartsのtooltipにクリックイベントを追加するケーススタディ
-
jsを使った簡単な照明スイッチのコード
-
vueが定義するプライベートフィルタと基本的な使い方
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
[解決済み] Twitter Bootstrapのタブ:ページの再読み込みやハイパーリンクで特定のタブに移動する
-
[解決済み] ドキュメントをジャンプさせずにwindow.location.hashを更新するにはどうすればよいですか?