4

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

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

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

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

images_2

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

images_1

Пробовал решить данную проблему через 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;
};

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

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

3 ответа 3

4
+25

Проблема в том, что 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
  • поменял window.location.href на history.pushState() но ситуация не извенилась - $(document).ready(function(){ var locItems = localStorage.getItem('backUpHist'); var siteLink = localStorage.getItem('linkSite'); var linksBl = "/#"+locItems; console.log(linksBl); window.onbeforeunload = function(){ history.pushState({}, "", linksBl); }; });
    – klifort
    3 июл 2019 в 10:42
  • Ситуация: извиняюсь.
    – doox911
    3 июл 2019 в 11:50
  • изменилась ;) у меня клавиатура без кирилицы по этому иногда есть ошибки)
    – klifort
    4 июл 2019 в 6:23
1

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.