Задача стоит следующая
Сайт построен на 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;
};
Но когда пользователь прокрутит родительский блок вверх или вниз, то пользователь возвращается на ту позицию с которой он переходил в категории, как на второй картинке.
Буду признателен за помощь.
Проблема в том, что 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()
}
})
Тут будет небольшой лаг перед переходом(перед закрытием страницы), но открываться она будет лучше.
Вместо window.location.href
нужно использовать history.pushState()
.
Вот решение нашлось долгими часами тестов, спасибо всем за помощь в решении задачи.
(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);
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
Необходимо взять значение из angularcopy($scope
По умолчанию отображаются надписи кнопок
Нужно чтобы при следующем нажатии на кнопку был плавный переход от предыдущего элемента новомуЧтобы при вводе других значений, замена происходила...
Как, почему этот код возвращает именно сумму элементов подмассива, а не сумму всех элементов или нуль?Я так понимаю, что в partialSum добавляются...