1. ホーム
  2. javascript

[解決済み] ブラウザの更新時に自動的にスクロールしないようにする

2022-11-19 10:27:55

質問

あるページにアクセスし、スクロールした後に更新すると、ページは元の場所に更新されます。これは素晴らしいことですが、これは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");
        });
    }

});