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

129

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

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

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

  • Лучшим вариантом было бы, если есть какое-то свойство или что-то, чтобы страница загружалась с положением прокрутки по умолчанию (т.е. вверху), что будет похоже на загрузку страницы , а не на обновление страницы .

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

Ответы:

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
источник