location.hashはクロムとサファリで1回のみ有効です

Question

私はlocation.hashを使って自分のページのどこかにスクロールします。ロケーションがハッシュを持たない場合はうまく動作します。しかし、その場所がすでに同じハッシュ値を持っている場合は動作しません。

たとえば、location.hash = 'a';は<div id="a"></div>にスクロールします。今location.hrefはhttp://www.example.com/test.html#aのようになります。また、location.hash = 'a';が再度トリガされると、ウィンドウはスクロールしません。これはChromeとSafariでのみ発生します。

解決策はScrolling a page using location.hash in Safariにありますが、不要なタグを追加したくありません。

また、私もlocation.href = '#a'を試しました。それは正常に動作しますが、私はそれがページの再読み込みを引き起こす恐れがあります。誰かがより良いアイデアを持っていますか？

Answer 1

あなたの最善の策は、ページに存在しないことが分かっている値で一時的にハッシュを置き換え、次にアクセスしようとしているハッシュをリロードすることです。

location.hash = 'a'; 

// this is the function that changes the hash 
function setHash(newHash) { 
    location.hash = 'someHashThatDoesntExist'; 
    location.hash = newHash; 
} 

setHash('a'); 

これはすべきことです。