Почему простейший скрипт jquery работает через раз в firefox?

Question

[runapa]

Странное поведение скрипта в firefox.

$(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#sd').offset().top - 250
        }, 'fast');
    });

При первой загрузке всё работает нормально. Если нажать command + r, то страница загружается и остаётся в позиции наверху. Если использовать control + command + r, то скрипт работает штатно. На windows поведение схожее.
В других браузерах такого нету.
Браузер firefox 99.0.1 (64 бита)
Как это решить?

Comments

[nonconformiste]

это костыль какой то ? лучше написать на ванильном js, будет более внятная поддержка браузерами

Answer 1

[wadowad]

Логика Файрфокса вроде понятна. Обновление ctrl+r это по сути обновление страницы без перезагрузки стилей и скриптов. Файрфокс просто помнит положение прокрутки и при обновлении оставляет прокрутку в том же месте, а прокрутку скрипта игнорирует.

Попробуйте добавить таймер. Не уверен, но может это решит проблему:

$(document).ready(function () {
  setTimeout(() => {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#sd').offset().top - 250
        }, 'fast');
  }, 1);
});

Comments

[runapa]

После некоторых экспериментов, я выяснил, что такое поведение, это работа какого-то алгоритма браузера. Если прокрутка страницы после перезагрузки находится в положении вверху, то скрипт отрабатывает штатно. Если же страница прокручена до положения больше половины, то после перезагрузки мозилла принудительно прокручивает страницу до верха, и плевать ему на скрипты. Пока прибил костылём:

history.scrollRestoration= “manual”;