Запретить автоматическую прокрутку браузера при обновлении

Question

Запретить автоматическую прокрутку браузера при обновлении

Если вы перейдете на страницу a и прокрутите ее, то обновите страницу в том месте, где вы ее оставили. Это здорово, однако это также происходит на страницах, где есть расположение якоря в url. Примером может быть, если вы нажали на ссылку http://example.com/post/244#comment5 и обновил страницу после просмотра вокруг вас не будет на якоре и страница прыгает вокруг. Есть ли способ предотвратить это с помощью javascript? Так что независимо от того, что вы всегда будете перемещаться к якорю.

518 7

javascript browser

7 ответов:

Comments

Ничего не найдено.

mrtsherman · Accepted Answer · 2018-06-26 17:41:44

Это решение больше не рекомендуется из-за изменений в поведении браузера. См. другие ответы.

в принципе, если используется якорь, мы привязываемся к событию прокрутки 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");
        });
    }

});

josetapadas · Accepted Answer · 2013-09-05 13:30:34

в Chrome, даже если вы заставите scrollTop до 0, он будет прыгать после первого события прокрутки.

вы должны привязать свиток к этому:
$(window).on('beforeunload', function() {
    $(window).scrollTop(0);
});
Итак, браузер обманут, чтобы поверить, что он был в начале до обновления.

imos · Accepted Answer · 2017-10-13 07:53:21

чтобы отключить автоматическое восстановление прокрутки, просто добавьте этот тег в раздел head.
<script>history.scrollRestoration = "manual"</script>
он не поддерживается IE. совместимость с браузерами.

Janaka Dombawela · Accepted Answer · 2017-05-23 14:33:26

после ряда неудач, наконец, мне удалось сделать трюк. anzo правильно здесь, как с помощью beforeunload заставит страницу перейти к началу, когда пользователь перезагружает страницу или нажимает ссылку. Так что unload - это явно способ сделать это.
$(window).on('unload', function() {
   $(window).scrollTop(0);
});
Javascript путь (Спасибо ProfNandaa):
window.onunload = function(){ window.scrollTo(0,0); }
изменить: 16/07/2015

проблема перехода все еще существует с Firefox даже с unload событие.

Daut · Accepted Answer · 2016-08-18 12:59:42

вы можете просто поставить # в конце, так что страница будет загружаться в верхней части.

работает на всех браузерах, мобильных и настольных, ведь это так просто.
$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
    window.location.replace(url + "#");
} else {
    window.location.replace(url);
}
});

// это загружает страницу с # в конце.

Oliver Schafeld · Accepted Answer · 2015-03-05 17:25:27

вот более общий подход. Вместо того, чтобы пытаться предотвратить прокрутку браузера (или прыгать на вершину, как это будет выглядеть), я просто восстанавливаю предыдущую позицию на странице. Т. е. я записываю текущее 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
}

nikmd23 · Accepted Answer · 2016-03-21 08:58:33

вы должны быть в состоянии.

Onload, проверьте, если window.location.hash имеет значение. Если это так, возьмите элемент с идентификатором, который соответствует хэш-значению. Найдите положение элемента (рекурсивные вызовы offsetTop/offsetLeft) и затем передайте эти значения в window.scrollTo(x, y) метод.

этого нужно прокрутить страницу до нужного элемента.