☰

window.location.hash = " "; 一番上までスクロールしないようにしますか? 質問する

tag-icon • tag-icon javascript fragment-identifier
window.location.hash =

私のウェブサイトではURLアドレスを次のように設定しています

window.location.hash = 'project_name';

しかし、アドレスURLをハッシュから消去したい場合（プロジェクトを閉じるとき）、設定します

window.location.hash = '';

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

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

ありがとう

ベストアンサー1

イベントはあります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;

どちらの方法も、個々の要素をスクロールしたり、ページを水平にスクロールしたりしないように調整できます。できる ハッシュ全体を削除する（ を含む）は、または関数を#呼び出すことで、最新のブラウザでナビゲーションやスクロールを発生することなく実行できます。pushStatereplaceState

おすすめ記事