Обновление страницы без сброса позиции скролла: решение

Пройдите тест, узнайте какой профессии подходите
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Чтобы сохранить место прокрутки на странице при её перезагрузке, можно применить sessionStorage. Запишите текущую позицию по оси Y перед обновлением страницы и затем восстановите её:

JS
Скопировать код
// Отправляемся? Запомним, где вы остановились.
window.onbeforeunload = () => sessionStorage.setItem('scrollPos', window.scrollY);

// Добро пожаловать обратно! Мы сохранили вашу позицию.
window.onload = () => window.scrollTo(0, sessionStorage.getItem('scrollPos') || 0);

Данный метод прост в применении и непосредственен. Он особенно полезен для поддержания состояния пользовательского интерфейса после обновления страницы.

Пошаговый план для смены профессии

Дополнительные методы

Если JavaScript отключен

Если JavaScript отключен или не работает, нет проблем! Просто добавьте позицию прокрутки в параметры URL:

HTML
Скопировать код
<a href="your-page.html?scroll=1000">Обновить</a>

А вот как выполнить это с помощью HTML без JavaScript:

HTML
Скопировать код
<body onload="window.scrollTo(0, location.search.split('scroll=')[1])">

Кто сказал, что без JavaScript нельзя обойтись? Есть решение и без него.

Метод с использованием jQuery

Для специалистов в jQuery позволю предложить такой вариант:

JS
Скопировать код
// Уходим? Не забудьте взять с собой позицию прокрутки!
$(window).on('beforeunload', function() {
    var scrollPosition = $(document).scrollTop();
    sessionStorage.setItem('scrollPos', scrollPosition);
});

// Разбираемся, начиная с восстановления позиции прокрутки!
$(window).on('load', function() {
    if (sessionStorage.scrollPos) {
        $('html, body').scrollTop(sessionStorage.getItem('scrollPos'));
    }
});

Такой подход с использованием jQuery обладает более высокой читаемостью.

Как справиться с динамическим содержимым

Если на странице присутствует динамическое содержимое, которое может меняться во время загрузки, не стоит волноваться. Осуществите восстановление позиции прокрутки после полного загрузки страницы:

JS
Скопировать код
window.onload = () => {
    setTimeout(() => {
        // Дадим время, чтобы страница загрузилась полностью.
        window.scrollTo(0, sessionStorage.getItem('scrollPos') || 0);
    }, 100); // Если нужно, откорректируйте задержку.
};

Немного терпения обеспечит безупречное восстановление места прокрутки.

Надёжное применение

Очистка сессионного хранилища

Слишком много данных в sessionStorage? Поддерживайте порядок:

JS
Скопировать код
window.onload = () => {
    const savedPos = sessionStorage.getItem('scrollPos');
    if (savedPos) {
        window.scrollTo(0, savedPos);
        // После себя прибирайте!
        sessionStorage.removeItem('scrollPos');
    }
};

Это обеспечит аккуратность и комфорт в использовании сессионного хранилища.

sessionStorage против localStorage

Используйте sessionStorage для временного хранения данных. Новая вкладка — это новая сессия. localStorage подходит для хранения данных на более долгий срок, но использование его для сохранения позиции прокрутки может быть не самым лучшим решением.

Ручное обновление страницы с сохранением позиции прокрутки

Если требуется обновить страницу вручную и при этом сохранить текущую позицию прокрутки, вот как это сделать:

JS
Скопировать код
function refreshPageWithScrollPosition() {
    var currentScroll = window.scrollY;
    // Обновим страницу, не забыв о позиции прокрутки!
    document.location.href = `your-page.html?scroll=${currentScroll}`;
}

Если использование sessionStorage не подходит, можно воспользоваться записью в URL.

Визуализация

Представим веб-страницу как тропу:

Markdown
Скопировать код
Тропа:
[🏞️ Начало] ---- (прокрутка) ---- [🌲 Середина пути]  ---- (продолжение) ---- [🏔️ Вершина]

Обновились и получили:

Markdown
Скопировать код
✨ После обновления ✨
[🏞️ Начало] // Мы снова вернулись в начало.

Но если вы применили JavaScript:

JS
Скопировать код
// Отметим ориентир перед уходом.
window.sessionStorage.setItem('scrollPosition', window.scrollY);

// После обновления вернёмся к отмеченному месту.
window.scrollTo(0, window.sessionStorage.getItem('scrollPosition'));

И тропа теперь помнит вас:

Markdown
Скопировать код
⚡️ После обновления ⚡️
[Вы вернулись на: 🏔️ Вершину]  // Позиция прокрутки сохранена!

Возвращайтесь и продолжите свой путь с того места, на котором остановились.

Управление прокруткой с scrollRestoration

Для обеспечения наилучшего пользовательского опыта воспользуйтесь функцией history.scrollRestoration:

JS
Скопировать код
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}

Это даст вам полный контроль над прокруткой страницы и улучшит взаимодействие пользователя с сайтом.

Решение для полной перезагрузки страницы

Если необходима полная перезагрузка страницы:

JS
Скопировать код
window.onbeforeunload = () => {
    sessionStorage.setItem('scrollPos', window.scrollY);
    // Иногда нужно решаться на решительные действия!
    document.location.reload(true); 
};

Это поможет оставить личный след даже при полном обновлении страницы с очисткой кэша.

Совместимость и производительность

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

Полезные материалы

  1. Свойство scrollRestoration в объекте History — для глубокого понимания API scrollRestoration.
  2. Метод Window.scrollTo() — справочник по управлению позицией прокрутки с помощью scrollTo().
  3. Создание высокопроизводительных CSS-анимаций — сохранение позиции прокрутки во время анимации для оптимальной производительности.
  4. History API – Восстановление позиции прокрутки — управление позицией прокрутки с использованием History API.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Как можно сохранить позицию прокрутки на странице при её обновлении?
1 / 5