更新時にブラウザが自動的にスクロールしないようにする

ページaに移動してスクロールすると、ページを更新したときに、その場所から更新されます。これはすばらしいことですが、URLにアンカーの場所があるページでも発生します。例としては、リンクをクリックして、http://example.com/post/244#comment5周りを見回した後にページを更新した場合、アンカーに移動せず、ページがジャンプします。JavaScriptでこれを防ぐ方法はありますか？そのため、常にアンカーに移動する必要はありません。

ブラウザの動作が変更されたため、このソリューションは推奨されなくなりました。他の回答を参照してください。

基本的に、アンカーが使用される場合、ウィンドウのスクロールイベントにバインドします。最初のスクロールイベントは、ブラウザによって行われる自動再配置に属している必要があるという考えです。これが発生すると、独自の再配置を行ってから、バインドされたイベントを削除します。これにより、後続のページスクロールによってシステムが停止するのを防ぎます。

$(document).ready(function() {
    if (window.location.hash) { 
        //bind to scroll function
        $(document).scroll( function() {
            var hash = window.location.hash
            var hashName = hash.substring(1, hash.length);
            var element;

            //if element has this id then scroll to it
            if ($(hash).length != 0) {
                element = $(hash);
            }
            //catch cases of links that use anchor name
            else if ($('a[name="' + hashName + '"]').length != 0)
            {
                //just use the first one in case there are multiples
                element = $('a[name="' + hashName + '"]:first');
            }

            //if we have a target then go to it
            if (element != undefined) {
                window.scrollTo(0, element.position().top);
            }
            //unbind the scroll event
            $(document).unbind("scroll");
        });
    }

});

Chromeでは、scrollTopを0に強制しても、最初のスクロールイベントの後でジャンプします。

スクロールをこれにバインドする必要があります：

$(window).on('beforeunload', function() {
    $(window).scrollTop(0);
});

そのため、ブラウザは、更新前の最初であると信じ込まされています。

自動スクロール復元を無効にするには、このタグをヘッドセクションに追加します。

<script>history.scrollRestoration = "manual"</script>

IEではサポートされていません。ブラウザの互換性。

多くの失敗の後、ついに私はなんとかトリックをすることができました。ここでanzoは正しいですbeforeunload。ユーザーがページをリロードしたりリンクをクリックしたりすると、ページが先頭にジャンプします。これunloadを行うための明確な方法です。

$(window).on('unload', function() {
   $(window).scrollTop(0);
});

Javascriptの方法（ProfNandaaに感謝）：

window.onunload = function(){ window.scrollTo(0,0); }

編集：16/07/2015

ジャンプの問題は、Firefoxでもunloadイベントがあっても残っています。

これがより一般的なアプローチです。ブラウザーがスクロールしないように（または、見た目が一番上になるように）移動するのではなく、ページの前の位置に戻します。つまり、ページの現在のyオフセットをlocalStorageに記録し、ページが読み込まれたらこの位置までスクロールします。

function storePagePosition() {
  var page_y = window.pageYOffset;
  localStorage.setItem("page_y", page_y);
}


window.addEventListener("scroll", storePagePosition);


var currentPageY;

try {
  currentPageY = localStorage.getItem("page_y");

  if (currentPageY === undefined) {
    localStorage.setItem("page_y") = 0;
  }

  window.scrollTo( 0, currentPageY );
} catch (e) {
    // no localStorage available
}

末尾に＃を付けるだけで、ページが上部に読み込まれます。

シンプルなので、モバイル、デスクトップのすべてのブラウザで動作します。

$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
    window.location.replace(url + "#");
} else {
    window.location.replace(url);
}

}）;

//これにより、末尾に＃が付いたページが読み込まれます。

これでうまくいきます。

    //Reset scroll top

    history.scrollRestoration = "manual"

    $(window).on('beforeunload', function(){
          $(window).scrollTop(0);
    });

あなたはできるはずです。

オンロード、window.location.hash値があるかどうかを確認します。含まれている場合は、ハッシュ値と一致するIDを持つ要素を取得します。要素の位置（offsetTop / offsetLeftへの再帰呼び出し）を見つけ、それらの値をwindow.scrollTo(x, y)メソッドに渡します。

これにより、ページが目的の要素までスクロールされます。