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

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

103 голосов
/ 08 сентября 2010

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

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

  • Я могу вспомнить, как некоторые JS или jQuery запускаются как onLoad() функция страницы для SET прокрутки страниц вверх.Но я не знаю, как я мог это сделать.

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

Ответы [ 10 ]

146 голосов
/ 08 сентября 2010

Вы можете сделать это, используя метод scrollTop на DOM ready : 

$(document).ready(function(){
    $(this).scrollTop(0);
});
132 голосов
/ 10 ноября 2014

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

window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}
34 голосов
/ 26 апреля 2014

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

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

$(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});
9 голосов
/ 07 сентября 2016

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

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

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

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

9 голосов
/ 29 мая 2013

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

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

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

8 голосов
/ 08 сентября 2010

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

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

$(document).load().scrollTop(0);
6 голосов
/ 12 января 2017

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

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

4 голосов
/ 12 января 2017

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

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

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});
3 голосов
/ 18 августа 2016 
$(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 голосов
/ 27 января 2016 
<script> location.hash = (location.hash) ? location.hash : " "; </script>

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

...