Запретить автоматическую прокрутку браузера при обновлении

Если вы перейдете на страницу 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есть ли значение. Если это так, возьмите элемент с идентификатором, который соответствует хеш-значению. Найдите позицию элемента (рекурсивные вызовы offsetTop / offsetLeft) и затем передайте эти значения в window.scrollTo(x, y)метод.

Это должно прокрутить страницу до нужного элемента.