181

Web サイトにスライド パネルを設定しました。

アニメーションが終了したら、ハッシュを次のように設定します

function() {
   window.location.hash = id;
}

(これはコールバックで、idが先に割り当てられます)。

これはうまく機能し、ユーザーがパネルをブックマークできるようにし、JavaScript 以外のバージョンを機能させることもできます。

ただし、ハッシュを更新すると、ブラウザーはその場所にジャンプします。これは予想される動作だと思います。

私の質問は、どうすればこれを防ぐことができますか? つまり、ウィンドウのハッシュを変更する方法はありますが、ハッシュが存在する場合、ブラウザを要素にスクロールさせないようにするにはどうすればよいですか? ある種event.preventDefault()の何か？

jQuery 1.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;

            }
    });
});
4

9 に答える 9

291

最新のブラウザーで履歴 API を使用し、古いブラウザーにフォールバックすることによる回避策があります。

if(history.pushState) {
    history.pushState(null, null, '#myhash');
}
else {
    location.hash = '#myhash';
}

クレジットはLea Verouに行きます

于 2013-02-04T15:44:07.830 に答える
54

問題は、要素の ID 属性にwindow.location.hashを設定していることです。"preventDefault()" を実行するかどうかに関係なく、ブラウザがその要素にジャンプするのは予期される動作です。

これを回避する 1 つの方法は、次のように任意の値をハッシュの前に付けることです。

window.location.hash = 'panel-' + id.replace('#', '');

次に、ページの読み込み時にプレフィックス付きのハッシュを確認するだけです。追加のボーナスとして、ハッシュ値を制御できるようになったため、スムーズにスクロールすることもできます...

$(function(){
    var h = window.location.hash.replace('panel-', '');
    if (h) {
        $('#slider').scrollTo(h, 800);
    }
});

これを (最初のページの読み込み時だけでなく) 常に機能させる必要がある場合は、関数を使用してハッシュ値の変更を監視し、オンザフライで正しい要素にジャンプできます。

var foundHash;
setInterval(function() {
    var h = window.location.hash.replace('panel-', '');
    if (h && h !== foundHash) {
        $('#slider').scrollTo(h, 800);
        foundHash = h;
    }
}, 100);
于 2011-03-24T04:56:59.500 に答える
30

安くて厄介な解決策..醜い #! を使用してください。スタイル。

設定するには:

window.location.hash = '#!' + id;

それを読むには：

id = window.location.hash.replace(/^#!/, '');

ページ内のアンカーや id と一致しないため、ジャンプしません。

于 2013-06-14T12:34:09.300 に答える
13

現在のスクロール位置を取得して変数に入れ、ハッシュを割り当てて、ページスクロールを元の場所に戻してはいけません。

var yScroll=document.body.scrollTop;
window.location.hash = id;
document.body.scrollTop=yScroll;

これはうまくいくはずです

于 2011-04-13T15:02:39.617 に答える
11

次のように、最新のブラウザー用の Attila Fulop (Lea Verou) ソリューションと古いブラウザー用の Gavin Brock ソリューションを組み合わせて使用​​しました。

if (history.pushState) {
    // IE10, Firefox, Chrome, etc.
    window.history.pushState(null, null, '#' + id);
} else {
    // IE9, IE8, etc
    window.location.hash = '#!' + id;
}

Gavin Brock が観察したように、ID を取得するには、次のように文字列 (この場合は "!" があってもなくてもかまいません) を処理する必要があります。

id = window.location.hash.replace(/^#!?/, '');

その前に、user706270 によって提案されたものと同様の解決策を試しましたが、Internet Explorer ではうまく機能しませんでした。その Javascript エンジンはあまり高速ではないため、スクロールの増減に気付くことができ、不快な視覚効果が生じます。

于 2015-10-14T15:50:12.783 に答える