Принудительная прокрутка страницы наверх в JavaScript/jQuery

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

Если вам необходимо немедленно переместиться в начало страницы, воспользуйтесь JavaScript и командой window.scrollTo(0, 0);. Для того чтобы прокрутка была плавной, имплементируйте jQuery: $('html, body').animate({ scrollTop: 0 }, 'smooth');. Оба метода эффективно решат поставленную задачу.

Vanilla JavaScript и совместимость с различными браузерами

В ситуации, где высоко ценится совместимость, стандартные document.body.scrollTop = 0 и document.documentElement.scrollTop = 0 могут оказаться на руку. Они обеспечивают корректную работу во всех браузерах, включая даже капризные версии Internet Explorer.

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

Не стоит опасаться потери текущей позиции прокрутки после перезагрузки страницы. С помощью команды history.scrollRestoration = 'manual' такого можно избежать. В старых браузерах, где данная опция не поддерживается, используйте setTimeout(function(){ window.scrollTo(0, 0); }, 0); в качестве альтернативного решения.

Подробнее об этом расскажет наш спикер на видео

Прокрутка по клику

Чтобы улучшить пользовательский интерфейс, позвольте выполнить прокрутку вверх страницы по нажатию на кнопку или ссылку. Добавьте обработчик событий, чтобы пользователь мог просто возвратиться к началу:

document.getElementById('scrollBtn').addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' }); // Магия с помощью одной кнопки!
});

Код без использования jQuery

Если вы предпочитаете снижение зависимостей и понятность кода, выберите Vanilla JavaScript. Более быстрая загрузка страниц и отсутствие потенциальных конфликтов – вот что вы получите, избавившись от тяжелых библиотек типа jQuery.

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

Можно представить веб-страницу как здание с несколькими этажами:

Здание (🏢): [Последний этаж 🌟, 3-й этаж 🔨, 2-й этаж 📚, 1-й этаж ☕️, Первый этаж 🛒]

Прокрутка вверх – это как мгновенный лифт на самый верхний этаж:

window.scrollTo(0, 0); // "Мы быстро поднимаемся!"

Если же хотите осуществлять плавное перемещение:

window.scroll({
  top: 0,
  left: 0,
  behavior: 'smooth' // Это как катание на круизном лайнере 🛥️
});

До: 🏢👇[...🧍‍♂️...]
После: 🏢🌟[🧍‍♂️]

Продвинутые методы и возможные подводные камни

Гладкость прокрутки

Используйте behavior: 'smooth' для создания плавного эффекта прокрутки наверх страницы.

Использование якорей

Если целевое место на странице может меняться, установите якорь (<a name="top"></a>), чтобы наверняка попасть в нужное место.

Высокоуровневая прокрутка

Для контролируемого перемещения по странице используйте функцию setInterval. Просто не забудьте остановить ее, достигнув вершины:

let intervalId = setInterval( () => {
  if (window.pageYOffset <= 0) clearInterval(intervalId);
  window.scrollBy(0, -50);
}, 16);

Уважение к пользовательскому опыту

Не допускайте неконтролируемой прокрутки. Если пользователь начинает скроллить самостоятельно, немедленно прекращайте автоматическую прокрутку.

Преимущества jQuery при обновлении страницы

С jQuery вы можете использовать $(window).unload() для контроля прокрутки при перезагрузке страницы, сохраняя текущий прогресс.

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

1. Метод Element: scrollTo() – Web API | MDN – Глубокое погружение в метод Element.scrollTo() для плавной прокрутки.
2. .scrollTop() | Официальная документация jQuery API – Официальная документация метода .scrollTop() от jQuery.
3. Плавная прокрутка | CSS-Tricks – Подробное рассмотрение различных методов создания плавной прокрутки, включая jQuery.
4. Как создать кнопку "Наверх" – Детальная инструкция по созданию кнопки "Наверх".
5. Легкий скрипт для анимации прокрутки к якорным ссылкам – GitHub – GitHub репозиторий с простым в использовании скриптом для плавной прокрутки на чистом JS.
6. Метод Window: scroll() – Web API | MDN – Обширная информация о методе window.scroll() для управления прокруткой.