Плавная прокрутка на JavaScript

Кратко: это пошаговое руководство объясняет, как реализовать плавную прокрутку на странице с помощью JavaScript, настраивать поведение и обеспечивать кроссбраузерную совместимость. Подойдёт для фронтенд‑разработчиков, которые хотят улучшить UX навигации на одностраничных и длинных страницах.

Крупный план мобильного телефона, удерживаемого двумя руками

Плавная прокрутка — это техника веб‑разработки, которая создаёт плавный переход при перемещении по странице. Вместо резкого «прыжка» браузер анимирует смещение, что делает навигацию более приятной и предсказуемой.

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

Понимание плавной прокрутки

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

Определение: плавная прокрутка — анимированное изменение позиции прокрутки контейнера или окна, приводящее элемент в видимую область.

Преимущества плавной прокрутки

Улучшает визуальную привлекательность: убирает резкие скачки, делая интерфейс более «поли́рованным».
Повышает вовлечённость: плавная анимация побуждает пользователя исследовать страницу дальше.
Улучшает навигацию: удобнее переходить между разделами на длинных страницах.

Важно: плавная прокрутка не решает все проблемы с доступностью. Нужно проверять взаимодействие с клавиатурой и вспомогательными технологиями (экранными читалками) и при необходимости давать возможность вернуться к стандартному поведению.

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

Ниже — минимальная практическая инструкция для классической навигации с якорями.

HTML‑структура

Создайте навигацию и секции с идентификаторами, на которые будут ссылаться якоря.

        `   
  
  
  
   
    
     
  Smooth Scrolling Guide for Web Developers   
   
  
   
     
       
      Section 1   
      Section 2   
      Section 3   
      
    
  
     
    Section 1   
     
  
     
    Section 2   
     
  
     
    Section 3   
     
  
     
  
  
`

Этот HTML содержит навигацию с тремя ссылками. Атрибут href указывает идентификатор целевой секции (например, section1). При клике браузер переходит к соответствующему элементу.

CSS‑стили

Добавьте базовую стилизацию для навигации и секций.

        `* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  
  
body {  
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;  
}  
  
nav {  
  background: #fff;  
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);  
  position: sticky;  
  top: 0;  
  padding: 30px;  
}  
  
nav ul {  
  display: flex;  
  gap: 10px;  
  justify-content: center;  
}  
  
nav ul li {  
  list-style: none;  
}  
  
nav ul li a {  
  border-radius: 5px;  
  border: 1.5px solid #909090;  
  text-decoration: none;  
  color: #333;  
  padding: 10px 20px;  
}  
  
section {  
  height: 100vh;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
`

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

JavaScript‑реализация

Чтобы добавить анимацию при клике по якорю, используйте метод scrollIntoView(). Это интегрированный метод класса Element, который прокручивает контейнер так, чтобы элемент стал видимым.

Начните с ожидания события DOMContentLoaded, чтобы убедиться, что DOM готов.

        `document.addEventListener("DOMContentLoaded", makeLinksSmooth);`

Затем определите функцию makeLinksSmooth(), которая выберет ссылки в навигации и повесит обработчики клика.

        `function makeLinksSmooth() {   
  const navLinks = document.querySelectorAll("nav a");   
  
  navLinks.forEach((link) => {  
    link.addEventListener("click", smoothScroll);  
  });  
}`

Наконец, определите smoothScroll(), который отменяет стандартное поведение и вызывает scrollIntoView с опцией behavior: “smooth”.

        `function smoothScroll(e) {  
  e.preventDefault();  
  const targetId = this.getAttribute("href");  
  const targetElement = document.querySelector(targetId);  
  
  if (targetElement) {   
    targetElement.scrollIntoView({ behavior: "smooth", });  
  }  
}`

Теперь при клике на ссылку страница будет плавно прокручиваться к целевой секции.

Тонкая настройка плавной прокрутки

Можно изменить позиционирование, добавить эффект ускорения и обеспечить совместимость.

Регулировка позиции прокрутки

Свойство block в аргументе scrollIntoView указывает, какая часть элемента должна оказаться в видимой области: “start”, “center” или “end”.

        `targetElement.scrollIntoView({ behavior: "smooth", block: "end" });   
`

Добавление easing (закругления ускорения)

Для более естественной анимации можно применять кривые ускорения (easing). Есть два подхода:

Использовать CSS‑свойство scroll‑behavior: smooth для базовой анимации.
Подключить JavaScript‑библиотеку или написать кастомную анимацию с requestAnimationFrame и собственным таймингом (cubic‑bezier, ease‑in/out и т.д.).

Пример CSS (обратите внимание, что “cubic-bezier” в scroll‑behavior не поддерживается в стандарте и приведён здесь для иллюстрации; для сложных easing‑функций используйте JS‑анимацию):

        `/* CSS to apply easing effect */   
html {  
  scroll-behavior: smooth;  
  
  /* Custom cubic-bezier easing */  
  scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);  
}`

Важно: не все браузеры одинаково поддерживают расширенные возможности плавной прокрутки.

Диаграмма поддержки браузерами методов JavaScript

Когда плавная прокрутка не подойдёт

Если на странице много динамически подгружаемого содержимого, простая прокрутка к якорю может привести к неправильной позиции — элемент ещё не загружен.
Для пользователей с ограничениями по восприимчивости к анимациям (motion sensitivity) анимация может вызывать дискомфорт. Предоставьте настройку «без анимации» или уважайте prefers-reduced-motion.
В задачах, где необходима мгновенная фокусировка (например, при критических сообщениях), лучше не применять плавную анимацию.

Совет: используйте медиа‑фичу prefers-reduced-motion и отключайте анимации для пользователей, которые их не приемлют.

Альтернативные подходы

CSS: простое решение через html { scroll-behavior: smooth; } — минимум кода, но ограниченная гибкость.
Библиотеки: smooth-scroll, locomotive-scroll, gsap ScrollToPlugin — дают дополнительные возможности, например, синхронизацию с параллаксом.
Собная реализация на requestAnimationFrame — полный контроль над кривой, длительностью и прерываемостью анимации.

Выбор зависит от требований: простота (CSS), контроль и эффекты (JS или библиотеки), производительность (легкие реализации).

Матрица совместимости и советы по миграции

Совместимость: scrollIntoView с опцией behavior поддерживается в современных версиях Chrome, Edge, Firefox и Safari, но были ранние несовместимости.
Полифилы: если ваша аудитория использует старые браузеры, добавьте полифил для smooth‑scroll или используйте библиотеку, которая учитывает кроссбраузерность.
Миграция: начинать с CSS scroll-behavior, затем при необходимости добавлять JS‑решения для более точной настройки и компенсировать edge‑кейсы.

Проверяйте поддержку на сайте caniuse.com и делайте тесты на реальных устройствах.

Чек‑листы по ролям

Разделите задачи по ролям, чтобы внедрение прошло последовательно.

Разработчик:

Добавить обработчики для ссылок и реализовать fallback.
Проверить prefers-reduced-motion.
Обработать динамическую подгрузку контента (ждать появления элемента).

Дизайнер UX:

Описать желаемую продолжительность и кривую easing.
Оценить влияние анимации на восприятие и доступность.

QA:

Тестировать в разных браузерах и на мобильных устройствах.
Проверить сценарии с клавиатурой и экранными читалками.

Критерии приёмки

При клике на навигационную ссылку страница плавно перемещается к целевой секции.
Поведение корректно при использовании клавиатуры и при уменьшении движений (prefers‑reduced‑motion).
Нет «перепрыгиваний» при динамической загрузке контента; при необходимости реализован подход «подождать элемент».
Работает в целевых браузерах либо есть полифил/фоллбэк.

Шпаргалка и сниппеты

Минимальный рабочий сниппет (JS):

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      const id = this.getAttribute('href');
      const el = document.querySelector(id);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
  });
});

Проверка prefers‑reduced‑motion:

if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  // Отключить анимации или использовать мгновенную прокрутку
  el.scrollIntoView({ behavior: 'auto' });
} else {
  el.scrollIntoView({ behavior: 'smooth' });
}

Тесты и сценарии приёма

Нажатие на ссылку плавно прокручивает к соответствующему разделу.
Нажатие последовательных ссылок не ломает анимацию (проверить прерывание и новое движение).
При включённом prefers‑reduced‑motion анимация отсутствует.
На мобильных устройствах взаимодействие остаётся предсказуемым, навигация не «скачет» из‑за панели адреса.

Короткий выбор подхода (Mental model)

Если нужно решение «включил и забыл» — CSS scroll-behavior.
Если требуется контроль над кривой и длительностью — write your own или GSAP.
Если нужна совместимость со старыми браузерами — библиотека с полифилом.

Глоссарий (одна строка на термин)

scrollIntoView — встроенный метод Element для прокрутки к элементу.
scroll-behavior — CSS‑свойство, задающее поведение при прокрутке.
prefers-reduced-motion — медиазапрос для пользователей, предпочитающих меньше анимации.

Итог

Плавная прокрутка — недорогой с точки зрения кода способ повысить качество интерфейса. Выберите уровень контроля, соответствующий вашим требованиям: CSS‑решение для простоты, JavaScript‑библиотеки или кастомные анимации для гибкости. Не забывайте про доступность и тестирование в целевых браузерах.

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