1. ホーム
  2. javascript

[解決済み] ドキュメントをジャンプさせずに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';
}

クレジット レア・ヴェロウ