Реализация плавной прокрутки на JavaScript без jQuery

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

Готовы к введению плавной прокрутки? Для этого воспользуемся встроенным методом scrollIntoView:

// Отправляемся на вечеринку 🥳
document.getElementById('target').scrollIntoView({ behavior: 'smooth' });

Отлично, правда? А теперь применим плавную прокрутку ко всем якорным ссылкам, простым образом:

// Все внутренние ссылки теперь прокручиваются плавно, будто скользят по льду!
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', e => {
    e.preventDefault();
    // Начинается плавное скольжение! 🛷
    document.querySelector(anchor.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
  });
});

Таким образом мы превращаем резкие переходы по якорям в плавные сдвиги.

Разбор: В честь плавной прокрутки

Подробности о scrollIntoView

Метод scrollIntoView позволяет детально настроить параметры объекта:

element.scrollIntoView({
  behavior: 'smooth', // Кто любит тряски на дороге? Я – нет!
  block: 'start',     // Самое лучшее место – на верху
  inline: 'nearest'   // Всё стильно и со вкусом
});

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

Чудеса прокрутки при помощи window.scrollTo

Желаете полного контроля? Ваш отличный помощник – window.scrollTo. Почувствуйте его магию:

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // Здесь никаких виражей! ✈️
    window.scrollTo(0, c – c / 8);
  }
};

scrollToTop();

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

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

Хотя фича scroll-behavior: smooth поддерживается большинством браузеров, стоит быть готовым к встрече с неожиданными ситуациями:

1. Капризы прокрутки: Пользователи могут начать вмешиваться, прокручивая страницу или производя сенсорные движения в то время, когда идет плавная прокрутка. Примите меры для контроля таких моментов, отслеживая события wheel и touchmove.
2. Проявления динамического содержания: DOM может меняться, изменять положение целевого элемента, например, при загрузке изображений или изменении стилей. Будьте готовы к таким сложностям и не утрачайте бдительность!

Применение CSS для усовершенствования прокрутки

CSS-метод к плавной прокрутке

Кто бы мог предположить, что HTML и CSS могут управлять всем? Знакомьтесь с scroll-behavior — приемом, срабатывающим в качестве CSS-свойства:

html {
  scroll-behavior: smooth;
}

Этот простейший прием позволяет заставить все якорные ссылки и программную прокрутку работать плавно.

Доведением прокрутки до совершенства с помощью CSS

scroll-behavior — это отличный способ постепенного улучшения. Даже если ваш браузер все еще не поддерживает scroll-behavior, прокрутка будет работать, просто без добавленной плавности.

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

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

Начало: 🚩 (Вершина вашего пути)
Путешествие: 🚂💨 (Плавно движущийся поезд страницы)
Конечная цель: 🏁 (Целевой элемент)

Обратите внимание на разницу:

До изменений: 🚂🔼 (Резкие, внезапные скачки)
После изменений: 🚂⛷️ (Нежные, элегантные скольжения)

Зачем искать энергию (⛽) в jQuery, ведь можно использовать элегантность HTML и CSS?

Профессиональные рекомендации для плавной прокрутки

Оптимизация производительности

Для оптимизации работы вашей анимации, чтобы она не превратилась в "кадр за кадром", используйте window.requestAnimationFrame для более продуктивного и эффективного использования ресурсов.

Поддержка во всех браузерах

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

Приоритет доступности

Мы все стремимся создать впечатляющий пользовательский опыт, но при этом нельзя забывать о доступности. Убедитесь, что ваша плавная прокрутка нормально воспринимается пользователями, которые пользуются клавиатурой, и теми, кто зависит от ассистивных технологий.

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

1. scroll-behavior – CSS: Cascading Style Sheets | MDN — здесь вы узнаете, как включить плавную прокрутку в браузере.
2. Плавная прокрутка | CSS-Tricks — это полная подборка различных способов реализации плавной прокрутки без использования jQuery.
3. Can I use... Support tables for HTML5, CSS3, etc — проверьте, готов ли ваш надежный браузер работать с CSS scroll-behavior.
4. Туториал по плавной прокрутке на чистом Javascript – YouTube — обучитесь реализации плавной прокрутки на чистом Javascript попивая чашечку кофе или подкрепляясь попкорном.
5. Полное руководство через ссылки и кнопки | CSS-Tricks — это удобное руководство рассматривает давносуществующую проблему: использовать ссылки или кнопки?
6. API Истории – Веб-API | MDN — обзор возможностей API Истории, будет особенно полезен при применении плавной прокрутки с обновлением URL.
7. GitHub – iamdustan/smoothscroll: Полифилл для плавной прокрутки — это отличный полифилл, доступный к применению, позволяющий знакомить старые браузеры с воможностью применять scroll-behavior.