Получить профессию в Skypro
Обновление страницы без сброса позиции скролла: решение
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Чтобы сохранить место прокрутки на странице при её перезагрузке, можно применить sessionStorage. Запишите текущую позицию по оси Y перед обновлением страницы и затем восстановите её:
// Отправляемся? Запомним, где вы остановились.
window.onbeforeunload = () => sessionStorage.setItem('scrollPos', window.scrollY);
// Добро пожаловать обратно! Мы сохранили вашу позицию.
window.onload = () => window.scrollTo(0, sessionStorage.getItem('scrollPos') || 0);Данный метод прост в применении и непосредственен. Он особенно полезен для поддержания состояния пользовательского интерфейса после обновления страницы.
Дополнительные методы
Если JavaScript отключен
Если JavaScript отключен или не работает, нет проблем! Просто добавьте позицию прокрутки в параметры URL:
<a href="your-page.html?scroll=1000">Обновить</a>А вот как выполнить это с помощью HTML без JavaScript:
<body onload="window.scrollTo(0, location.search.split('scroll=')[1])">Кто сказал, что без JavaScript нельзя обойтись? Есть решение и без него.
Метод с использованием jQuery
Для специалистов в jQuery позволю предложить такой вариант:
// Уходим? Не забудьте взять с собой позицию прокрутки!
$(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 обладает более высокой читаемостью.
Как справиться с динамическим содержимым
Если на странице присутствует динамическое содержимое, которое может меняться во время загрузки, не стоит волноваться. Осуществите восстановление позиции прокрутки после полного загрузки страницы:
window.onload = () => {
setTimeout(() => {
// Дадим время, чтобы страница загрузилась полностью.
window.scrollTo(0, sessionStorage.getItem('scrollPos') || 0);
}, 100); // Если нужно, откорректируйте задержку.
};Немного терпения обеспечит безупречное восстановление места прокрутки.
Надёжное применение
Очистка сессионного хранилища
Слишком много данных в sessionStorage? Поддерживайте порядок:
window.onload = () => {
const savedPos = sessionStorage.getItem('scrollPos');
if (savedPos) {
window.scrollTo(0, savedPos);
// После себя прибирайте!
sessionStorage.removeItem('scrollPos');
}
};Это обеспечит аккуратность и комфорт в использовании сессионного хранилища.
sessionStorage против localStorage
Используйте sessionStorage для временного хранения данных. Новая вкладка — это новая сессия. localStorage подходит для хранения данных на более долгий срок, но использование его для сохранения позиции прокрутки может быть не самым лучшим решением.
Ручное обновление страницы с сохранением позиции прокрутки
Если требуется обновить страницу вручную и при этом сохранить текущую позицию прокрутки, вот как это сделать:
function refreshPageWithScrollPosition() {
var currentScroll = window.scrollY;
// Обновим страницу, не забыв о позиции прокрутки!
document.location.href = `your-page.html?scroll=${currentScroll}`;
}Если использование sessionStorage не подходит, можно воспользоваться записью в URL.
Визуализация
Представим веб-страницу как тропу:
Тропа:
[🏞️ Начало] ---- (прокрутка) ---- [🌲 Середина пути] ---- (продолжение) ---- [🏔️ Вершина]Обновились и получили:
✨ После обновления ✨
[🏞️ Начало] // Мы снова вернулись в начало.Но если вы применили JavaScript:
// Отметим ориентир перед уходом.
window.sessionStorage.setItem('scrollPosition', window.scrollY);
// После обновления вернёмся к отмеченному месту.
window.scrollTo(0, window.sessionStorage.getItem('scrollPosition'));И тропа теперь помнит вас:
⚡️ После обновления ⚡️
[Вы вернулись на: 🏔️ Вершину] // Позиция прокрутки сохранена!Возвращайтесь и продолжите свой путь с того места, на котором остановились.
Управление прокруткой с scrollRestoration
Для обеспечения наилучшего пользовательского опыта воспользуйтесь функцией history.scrollRestoration:
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}Это даст вам полный контроль над прокруткой страницы и улучшит взаимодействие пользователя с сайтом.
Решение для полной перезагрузки страницы
Если необходима полная перезагрузка страницы:
window.onbeforeunload = () => {
sessionStorage.setItem('scrollPos', window.scrollY);
// Иногда нужно решаться на решительные действия!
document.location.reload(true);
};Это поможет оставить личный след даже при полном обновлении страницы с очисткой кэша.
Совместимость и производительность
Не стоит полагаться полностью на сторонние библиотеки. Производительность и совместимость с браузерами должны иметь приоритет. Не каждая стратегия будет работать одинаково в разных браузерах.
Полезные материалы
- Свойство scrollRestoration в объекте History — для глубокого понимания API
scrollRestoration. - Метод Window.scrollTo() — справочник по управлению позицией прокрутки с помощью
scrollTo(). - Создание высокопроизводительных CSS-анимаций — сохранение позиции прокрутки во время анимации для оптимальной производительности.
- History API – Восстановление позиции прокрутки — управление позицией прокрутки с использованием History API.