Получить профессию в Skypro
Прокрутка страницы вверх при обновлении в HTML: решение JS
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Функция JavaScript window.scrollTo() дает возможность возвращать просмотр к началу страницы при ее обновлении:
window.onbeforeunload = function() { window.scrollTo(0, 0); };Этот код использует событие onbeforeunload, чтобы сбросить прокрутку страницы перед ее закрытием или обновлением.
Управление автоматическим восстановлением прокрутки браузером
История браузера может бывать причиной изменения позиции прокрутки на странице. Для нейтрализации этого поведения устанавливают атрибут history.scrollRestoration в состояние "manual":
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}Таким образом, вы получаете полную контроль над прокруткой при навигации по истории браузера, так как отключаете автоматическое управление прокруткой страницей.
Метод управления прокруткой страницы при помощи jQuery
Пользователям jQuery можно предложить следующий способ: привязку выполняемой функции scrollTop(0) к событию $(window).on('beforeunload'):
$(window).on('beforeunload', function() {
$(window).scrollTop(0);
});Описанный здесь код обеспечивает возврат в начало страницы перед ее закрытием, используя для этого метод scrollTop из библиотеки jQuery.
Как использовать событие onbeforeunload правильно
Для избежания ошибок нужно корректно обрабатывать событие window.onbeforeunload:
window.onbeforeunload = function() {
window.scrollTo(0, 0);
};Необходимо избегать вызова функции setTimeout, поскольку она может привести к непредсказуемым результатам. Событие onbeforeunload срабатывает без задержки.
Визуализация
Воспринимайте прокрутку страницы как взлет американских горок 🎢, которые после каждого обновления страницы начинают движение заново:
При обновлении: 🔄
Текущая позиция: 🎢🔝
Желаемая позиция: 🎢🎠 (уровень земли)Цель данного решения – заставлять страницу (или американские горки), начинать прокрутку с начальной отметки при каждом обновлении.
<body onload="window.scrollTo(0,0);">
<!-- Содержимое страницы -->
</body>Таким образом, каждая загрузка страницы (взлет на американских горках) начинается сначала (с верха страницы).
Поддержка стабильной позиции прокрутки на страницах с динамичным содержимым
AJAX и одностраничные приложения (SPA) могут вызывать смещение позиции прокрутки из-за динамичного изменения содержимого. Обязательно возвращайтесь к началу страницы после каждого обновления. В этом случае вызов window.scrollTo(0,0) является необходимым действием после добавления новых элементов на страницу.
Борьба с изменением позиции прокрутки при загрузке медиаконтента
Страницы с большим количеством медиаконтента могут менять позицию прокрутки. Возврат к началу страницы после загрузки всех элементов – это ваша задача. Для этого используйте отслеживание событий загрузки страницы или отдельных изображений.
Кроссбраузерность — проверено!
Разные браузеры обрабатывают событие onbeforeunload по-разному. Не забывайте тестировать свой код в различных браузерах, используйте teхники обнаружения возможностей браузера (feature detection) и полифилы, чтобы создать совместимое с различными браузерами решение.
Полезные материалы
- Метод Window: scrollTo() – Web APIs | MDN — Подробное описание метода
scrollToв JavaScript. - Плавная прокрутка | CSS-Tricks — Реализация плавной прокрутки с помощью CSS.
- Метод Window scrollTo() | W3Schools — Информация о
scrollToот W3Schools. - Руководство по использованию Vanilla Ajax без jQuery — SitePoint — Альтернативы использования AJAX без привлечения jQuery.
- Свойство Document: readyState – Web APIs | MDN — Обзор стадий готовности документа.
- Событие Window: unload – Web APIs | MDN — Информация о событии
unloadи сбросе позиции прокрутки. - Объяснение методов Debouncing и Throttling на примерах | CSS-Tricks — Описание дебаунсинга и троттлинга как методов оптимизации поведения прокрутки.