1. ホーム
  2. javascript

[解決済み] ページのスクロールを伴わない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を取得します。