Сохранение позиции скролла при нажатии кнопки и перезагрузке страницы

Question

Я уже задавал похожий вопрос, но попробую перефразировать. Есть магазин, добавление в корзину сделал на обычном php(Laravel). При добавлении в корзину срабатывает submit (хотя там не <button>, а обычная ссылка <a>) и страница перезагружается. И хотелось бы, чтобы при нажатии добавить в корзину, пользователя перенесло к тому продукту, на кнопку которого он нажал, а не в начало страницы. Может например добавить кнопке id, а через JQuery отправлять к ней? Возможно у самого php есть такая возможность? Знаю про AJAX, но уже здесь корзину переделывать не хочется.

P.S. Видел вариант сохранения скролла при любой перезагрузке, но даже если пользователь вышел с сайта, а через время зашел, либо сам перезагрузил страницу, позиция скролла сохранится, а это не то, хотелось бы чтобы это срабатывало только после нажатия кнопки.

Заранее спасибо!

Answer 1

let cords = ['scrollX','scrollY']; 
// сохраняем позицию скролла в localStorage
window.addEventListener('unload', e => cords.forEach(cord => localStorage[cord] = window[cord])); 
// вешаем событие на загрузку (ресурсов) страницы
window.addEventListener('load', e => {
    // если в localStorage имеются данные
    if (localStorage[cords[0]]) {
        // скроллим к сохраненным координатам
        window.scroll(...cords.map(cord => localStorage[cord]));
        // удаляем данные с localStorage
        cords.forEach(cord => localStorage.removeItem(cord));
    }
});

UPD. Если у каждого товара есть для перехода эл-т, то вешаем событие на него:

document.querySelectorAll('.cardButton').forEach(el => {
    el.addEventListener('click', () => {
        cords.forEach(cord => localStorage[cord] = window[cord]); 
    });
});

БЛОГ НА HUSL

Сохранение позиции скролла при нажатии кнопки и перезагрузке страницы

Ответы (1 шт):