Возврат на предыдущую страницу

#javascript #jquery #wordpress

Задача стоит следующая

Сайт построен на Wordpress 5.2.2

Есть 3 родительских блока каждый с разным id которые добавлены в меню, в самих блоках
есть ещё дополнительные элементы-категории, при нажатии на элемент-категории посетитель
переходит к категории сайта.

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



При переходе с меню(ссылка сделана якорь на родительский блок'#blok1') родительский
блок становится точно по центру страницы.



Пробовал решить данную проблему через localStorage где записываю id блока с которого
переходит пользователь 

 $(".wrapper_body .categ_block").on("click", function(){
    var locItem = $(this).attr('id');
     var linkST = window.location.href;
     localStorage.setItem('linkSite', linkST);
     localStorage.setItem('backUpHist', locItem);
});


и на странице уже самой категории при возврате назад пробую подменить ссылку на свою 

var locItems = localStorage.getItem('backUpHist');
var siteLink =  localStorage.getItem('linkSite');
var linksBl = siteLink+"#"+locItems; 
 console.log(linksBl);
 window.onbeforeunload = function(){
    window.location.href =  linksBl;
};


Но когда пользователь прокрутит родительский блок вверх или вниз, то пользователь
возвращается на ту позицию с которой он переходил в категории, как на второй картинке.

Буду признателен за помощь.
    

Ответы

Ответ 1

Проблема в том, что Chrome сам по себе запоминает позицию скролла, и при возвращение
назад отдает предпочтение ей, а не элементу из якоря.

Эту фичу можно отключить, однако в моих тестах тогда браузер переставал и переходить
к элементу из урла. Но можно перейти к нему самому:

  // отключаем автовосстановление скролла
  if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual'
  }
  // переходим к элементу
  window.addEventListener('load', function() {
    const hash = window.location.hash
    location.hash = ""
    location.hash = hash
  })


Второй вариант без отключения этой фичи - прокручивать к элементу из хеша самим с
помощью js

 window.addEventListener('load', function() {
   if (window.location.hash) {
     setTimeout(function() { document.querySelector(window.location.hash).scrollIntoView()
}, 0)
   }
 })


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

Третий вариант - обмануть восстановление скролла браузера, перед закрытием страницы
установив в нужное нам положение

 window.addEventListener('beforeunload', function() {
   if (window.location.hash) {
     document.querySelector(window.location.hash).scrollIntoView()
   }
 })


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


Ответ 2

Вместо window.location.href нужно использовать history.pushState().


Ответ 3

Вот решение нашлось долгими часами тестов, спасибо всем за помощь в решении задачи.



(function($) {
$(document).ready(function(){
var locItems = localStorage.getItem('backUpHist');
var siteLink =  localStorage.getItem('linkSite');
var linksBl = siteLink + "/#"+locItems; 
 
window.history.pushState({page: 1}, "", "");
window.onpopstate = function(event) {
  if(event){
    window.location.href = linksBl;
  }
};

});
})(jQuery);