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

147

13 марта 2021, 09:40

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

Сайт построен на 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;
};

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

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

Answer 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()
   }
 })

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

Answer 2

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

Answer 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);