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

Если вы перейдете на страницу a и прокрутите страницу, а затем обновите страницу, она обновится в том месте, где вы ее оставили. Это замечательно, однако это также происходит на страницах, где есть привязка местоположения в URL. Например, если вы нажмете на ссылку http://example.com/post/244#comment5 и обновите страницу после осмотра, вы не окажетесь на якоре, и страница скачет. Есть ли способ предотвратить это с помощью javascript? Итак, что-то-то-то-то, что вы всегда будете искать на якоре.

Ответ 1

Обратите внимание, что это больше не работает в Chrome. Ответ Хосе кажется настоящим, лучшим решением. Я оставляю этот ответ неповрежденным для справки.

В принципе, если используется привязка, мы привязываемся к событию прокрутки окон. Идея состоит в том, что первое событие прокрутки должно принадлежать автоматическому перепозиционированию, выполняемому браузером. Когда это происходит, мы делаем свое собственное перепозиционирование, а затем удаляем связанное событие. Это предотвращает последующие прокрутки страниц из системы.

$(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");
        });
    }

});

Ответ 2

В Chrome, даже если вы заставите scrollTop на 0, он будет прыгать после первого события прокрутки.

Вы должны привязать прокрутку к следующему:

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

Итак, браузер обманом полагает, что он был в начале перед обновлением.

Ответ 3

После ряда неудач, наконец, мне удалось сделать трюк. anzo здесь правильно, так как использование beforeunload приведет к переходу страницы вверх, когда пользователь перезагрузит страницу или щелкнет ссылку. Итак, unload - это четкий способ сделать это.

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

Javascript way (Спасибо ProfNandaa):

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

EDIT: 16/07/2015

Проблема с переходом по-прежнему существует с Firefox даже при событии unload.

Ответ 4

Чтобы отключить автоматическое восстановление прокрутки, просто добавьте этот тег в раздел главы.

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

Он не поддерживается IE. Совместимость с браузером.

Ответ 5

Здесь более общий подход. Вместо того, чтобы препятствовать прокрутке браузера (или прыгать вверх, как это было бы похоже), я просто восстанавливаю предыдущую позицию на странице. То есть Я записываю текущее у-смещение страницы в 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
}

Ответ 6

Вы должны уметь.

Загрузите, проверьте, имеет ли значение window.location.hash значение. Если это так, возьмите элемент с идентификатором, который соответствует хеш-значению. Найдите позицию элемента (рекурсивные вызовы offsetTop/offsetLeft), а затем передайте эти значения в метод window.scrollTo(x, y).

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

Ответ 7

Вы можете просто положить # в конец, чтобы страница загружалась вверху.

Работает во всех браузерах, мобильных и настольных, потому что это так просто.

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

});

//Это загружает страницу С# в конце.