web-dev-qa-db-ja.com

window.location.hash = "";上にスクロールしないようにしますか？

私のウェブサイトで私はURLアドレスを使用して設定します

window.location.hash = 'project_name';

しかし、（プロジェクトを閉じるとき）ハッシュからアドレスURLを削除したい場合は、

window.location.hash = '';

ページがトップページまでスクロールすることがあります

副作用なしにURLをクリーンアップする方法はありますか？

ありがとう

javascriptfragment-identifier
23
Francesco

onhashchangeイベントがありますが、スクロールを防ぐためにブラウザ間で確実にキャンセルすることはできません。最良の解決策は、ハッシュ位置を変更する前にスクロール位置を記録し、後でそれをリセットすることです。たとえば、次のコードは、#のhref値を使用して、伝播を停止しないリンクのクリックをキャッチし、ページが垂直方向にスクロールしないようにします。

document.onclick = function (evt) {
    var tgt = (evt && evt.target) || event.srcElement,
        scr = document.body.scrollTop;

    if (tgt.tagName == "A" && tgt.href.slice(-1) == "#") {
        window.location.href = "#";
        document.body.scrollTop = scr;           
        return false;
    }
}

スクリプトを使用してハッシュを変更する場合は、次のコードを使用できます。

var scr = document.body.scrollTop;
window.location.href = '#';
document.body.scrollTop = scr;

これらの方法のいずれかを調整して、個々の要素のスクロールやページの水平方向のスクロールを回避できます。最新のブラウザでナビゲーションやスクロールを行わずに、canハッシュ全体を削除 （#を含む）できることに注意してくださいpushStateまたはreplaceState関数を呼び出す。

30
Andy E

私も同じ問題を抱えていて、答えを求めてここに来ました。非常に簡単な方法があることがわかりました。

window.location.hash = ' ';

基本的には「＃」に設定しますが、スペースが存在しないため移動しません。ページに再度アクセスしても、ページの扱いは＃と変わりません。

15
JustMaier

まず、ソリューションに感謝します-@ Andy-Eと@JustMaier。

しかし、FirefoxのAndy Eの2番目のコードブロックとChromeのJustMaierのコードに基づいて、それを機能させるのに問題がありました。

だから私はそれらの2つのコードブロックのマッシュアップをしました、そしてそれは両方のブラウザで意図したように動作します

var scr = document.body.scrollTop;

window.location.hash = ' ';

document.body.scrollTop = scr;


上記の本物のJS忍者から何も奪わない私の2セント。 ：）

8
SinSync

document.body.scrollTop 非推奨 、最新のChromeバージョンはここでは不安定なようです。以下は機能するはずです：

  var topPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  window.location.href = '#';
  document.documentElement.scrollTop = topPos;
1
valk