Запобігання автоматичній прокрутці браузера під час оновлення

Якщо ви перейдете на сторінку a та прокрутите сторінку, тоді оновіть сторінку та оновитесь там, де ви її залишили. Це чудово, однак це також трапляється на сторінках, де в URL-адресі є прив'язка. Прикладом може бути, якщо ви натиснули на посилання http://example.com/post/244#comment5та оновили сторінку, оглянувшись навколо, ви б не опинилися на якорі, а сторінка стрибала. Чи є спосіб запобігти цьому за допомогою JavaScript? Так що, незважаючи ні на що, ви завжди переходите до якоря.

Це рішення більше не рекомендується через зміни в поведінці браузера. Дивіться інші відповіді.

В основному, якщо використовується якір, ми прив’язуємось до події прокрутки Windows. Ідея полягає в тому, що перша подія прокрутки повинна належати до автоматичного переміщення, здійсненого браузером. Коли це відбувається, ми робимо власну репозицію, а потім видаляємо пов'язану подію. Це запобігає подальшим прокруткам сторінок, що можуть розгубити систему.

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

Ви повинні мати можливість.

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

Це повинно прокрутити сторінку до потрібного елемента.