Запомнить позицию скрола в блоке при смене или перезагрузке страницы?

Question

[DIVSIDE]

Привет. Подскажите как запомнить позицию скрола в нужном мне блоке, чтобы после перезагрузки страницы или переходе на другую, скролл в блоке оставался на том же месте?

Описание:
У меня есть страница поделённая флексами на 2 части. Лево и право. Левая часть - это nav. Правая - сам контент. У nav высота 100vh. Но т.к ссылок в меню тьма, он переполняет родителя. Я повесил тудаoverflow scroll. Соотв. теперь мой nav спокойно скроллится. Однако если перейти на другую страницу, скролл сбросится и снова будет сверху. Ajax для смены контента не использую, да и не аппка это.

Пробовал jquery, но что-то вообще не вкатило...

$(document).ready(function () {

    if (localStorage.getItem(".nav__wrapper") != null) {
        $("#nav__wrapper").scrollTop(localStorage.getItem(".nav__wrapper"));
    }

    $(window).on("scroll", function () {
        localStorage.setItem(".nav__wrapper", $(window).scrollTop());
    });

});

Каким образом можно это исправить на чистом js?

Пример:

Comments

[ProjectSoft]

Каким образом можно это исправить на чистом js?

Запоминаете в cockie позицию скрола и при переходе скролите к данной позиции.

[DIVSIDE]

ProjectSoft, куки не юзаю, локалстор же подойдет?

[ProjectSoft]

DIVSIDE, конечно подойдёт.
Только помните, что локалстор живёт постоянно, а куки можно сделать до закрытия браузера, что на много удобнее первого.

[DIVSIDE]

ProjectSoft, подскажи, сойдет ли

const navScroll = document.querySelector(".nav__wrapper");

navScroll.addEventListener("scroll", event => {
    localStorage.setItem('navScrollTop', navScroll.scrollTop);
});

window.addEventListener('load', () => {
    var scrollTopPixels = localStorage.getItem('navScrollTop');
    navScroll.scrollTo(0, scrollTopPixels);
});

Или можно и нужно как-то сократить? Само собой js не сразу отрабатывает и видно небольшой прыжок вначале загрузки

[historydev]

DIVSIDE, главное nav ты сразу пытаешься получить, а чтобы крутануть ждём загрузки всей страницы))

[ProjectSoft]

DIVSIDE, сойдёт.
И historydev прав. От этого никуда не денешься. Ведь ajax-ом или fetch ты не хочешь пользоваться ))
Страниц может быть сколько угодно. А клики в нав ты можешь обрабатывать ajax-ом и грузить в контент.

[DIVSIDE]

historydev, У меня js defer. А onload просто на автомате поставил. Спасибо что подсказал, исполнение сразу убирает прыжок. Тупанул.

Вместо localStorageпоставил sessionStorage. До закрытия вкладки самое то.

Answer 1

[DIVSIDE]

ProjectSoft historydev
Правильный ответ