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

134
22 мая 2022, 11:10

Я уже задавал похожий вопрос, но попробую перефразировать. Есть магазин, добавление в корзину сделал на обычном 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]); 
    });
});
READ ALSO
Webpack: No template for dependency: CssDependency
javascript

Webpack: No template for dependency: CssDependency

Есть небольшой проект на вебпаке 54

 294
Как из url-адреса получить нужные значения?
javascript

Как из url-адреса получить нужные значения?

Получаю urlК примеру он такой:

 148
Шарик следящий за курсором мыши лагает
javascript

Шарик следящий за курсором мыши лагает

У меня есть шарик, который следит за курсором мыши, но проблема состоит в том, что он лагает, когда я скролюКак избавиться от этого? Я еще использую...

 154
Как правильно сверстать страницу?
javascript

Как правильно сверстать страницу?

Создаю приложение и нужно сверстать вот такую страницуМеня интересуют конкретно 3 контейнера: хедер, сайдбар и главный контейнер(как я понял...

 263