Принудительная прокрутка страницы вверх при обновлении страницы в HTML

129

Я создаю веб-сайт, который публикую с помощью divs. Когда я обновляю страницу после ее прокрутки до положения X, страница загружается с положением прокрутки как X.

Как заставить страницу прокручиваться вверх при обновлении страницы?

Я могу думать о каком-то JS или jQuery, запущенном как onLoad()функция страницы, чтобы УСТАНОВИТЬ прокрутку страниц вверх. Но я не знаю, как я мог это сделать.
Лучшим вариантом было бы, если есть какое-то свойство или что-то, чтобы страница загружалась с положением прокрутки по умолчанию (т.е. вверху), что будет похоже на загрузку страницы , а не на обновление страницы .

— Луна
источник

Удивительно, но ни одно из решений здесь не сработало для меня, но это

— Райан

165

Вы можете сделать это с помощью метода scrollTop в готовой модели DOM :

$(document).ready(function(){
    $(this).scrollTop(0);
});

— похлопывание
источник

9

Не работает в Safari. Но это -> stackoverflow.com/a/18633915/102133 .

— Бен

166

Для простой простой реализации JavaScript:

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

Развернуть фрагмент

— ProfNandaa
источник

1

Это правильный ответ. Решение jQuery работает не во всех случаях.

— Гарри Стивенс

@ Paul12_ - Я только что протестировал его, Safari 11.0.3и у меня он работает нормально, какой из них вы используете?

— ProfNandaa

У меня это не сработало. Мне пришлось вернуться из функции onbeforeload, чтобы она заработала.

— Iqbal

@Iqbal - что ты сделал return?

— ПрофНандаа

1

также document.querySelector('html').style.scrollBehavior = '';может потребоваться добавление . Если он был установлен smooth, он может не попасть в начало до перезагрузки страницы.

— kevnk

35

Ответ здесь не работает для сафари, document.ready часто запускается слишком рано.

Следует использовать beforeunloadсобытие, которое мешает вам выполнять некоторыеsetTimeout

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

— Бен
источник

1

Добавить после функции прокрутки: $ ('html'). Text (''); , поэтому коляска будет сброшена

— user956584

1

@Userpassword Вам не кажется, что $ ("html"). Remove () было бы лучше?

— Бен

18

Опять же, лучший ответ:

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

(это для не-jQuery, посмотрите, ищете ли вы метод JQ)

РЕДАКТИРОВАТЬ: небольшая ошибка его "onbeforunload" :) Chrome и другие браузеры "запоминают" последнюю позицию прокрутки перед выгрузкой, поэтому, если вы установите значение 0,0 непосредственно перед выгрузкой вашей страницы, они запомнят 0,0 и выиграют не прокручиваем назад туда, где была полоса прокрутки :)

— xoxel
источник

@ Paul12_ Safari требует document.documentElement.scrollTopдля работы. Я обычно использую оба.

— Грэм О'Махони

9

Проверьте .scrollTop()функцию jQuery здесь

Это будет выглядеть примерно так

$(document).load().scrollTop(0);

— jon3laze
источник

9

Вы также можете попробовать

$(document).ready(function(){
    $(window).scrollTop(0);
});

Если вы хотите прокрутить в позиции x, вы можете изменить значение с 0 на x.

— Анкит
источник

7

Вместо этого location.reload()просто используйте location.href = location.href. Он не будет прокручиваться к предыдущей позиции, как это location.reload()происходит.

Примечание: это не будет перезагружено, если в URL-адресе есть #

— Nauphal
источник

4

<script> location.hash = (location.hash) ? location.hash : " "; </script>

Поместите приведенный выше скрипт в <head>тег вашего html. Не уверен, как ведут себя одностраничные приложения! Но на обычных страницах работает как шарм.

— harshes53
источник

4

Ответ здесь (прокрутка $(document).ready ) не работает, если на странице есть видео. В этом случае страница прокручивается после запуска этого события, отменяя нашу работу.

Лучшим ответом должно быть:

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

— DrPollit0
источник

3

$(document).ready(function(){
    $(window).scrollTop(0);
});

у меня не сработало, так как Google Chrome просто прокручивал вниз после завершения загрузки страницы. Я использовал

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

// Это загружает страницу с # в конце. Так что он всегда будет загружаться вверху.

— Даут
источник

3

Чтобы сбросить окно, прокрутите его вверх, $(window).scrollTop(0)в событии beforeunload есть трюки, однако, как я тестировал в Chrome 80, он вернется в старое место после перезагрузки.

Чтобы этого не произошло, установите history.scrollRestorationдля "manual".

//Reset scroll top

history.scrollRestoration = "manual";

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

— Алекс развлекается
источник

Для меня это лучший ответ, работает в Chrome / Linux

— SNS - Web et Informatique

0

Суперкалифрагилистический экспериментальный ответ:

добавьте это вверху вашего js файла или тега скрипта

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari

— Nicobels
источник