Плавная прокрутка на сайте: зачем нужен smooth scrolling

Для кого эта статья:

• Frontend-разработчики
• Дизайнеры пользовательских интерфейсов

• Специалисты по UX и веб-разработке

  Резкие скачки при нажатии на навигационное меню — бич многих сайтов. Представьте: пользователь нажимает на пункт, и его буквально швыряет вниз по странице без предупреждения. Smooth scrolling решает эту проблему, превращая хаотичные рывки в плавное, приятное скольжение. Это не просто эстетический бонус — это необходимый компонент качественного UX, который значительно снижает когнитивную нагрузку пользователя и позволяет ему сохранить контекст при навигации по странице. 🚀

Хотите от теории перейти к мастерству создания интерактивных сайтов? Погрузитесь в мир frontend-разработки на курсе Обучение веб-разработке от Skypro. Вы не просто научитесь реализовывать smooth scrolling и другие современные интерфейсные решения — вы станете разработчиком, способным создавать сайты, которые восхищают пользователей с первого взаимодействия. От базовых техник до продвинутых приемов — всё в одной программе.

Почему плавная прокрутка необходима для современного сайта

Плавная прокрутка давно перестала быть просто модным трендом и превратилась в неотъемлемый элемент качественного пользовательского интерфейса. И для этого есть весомые причины:

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

Согласно исследованиям Nielsen Norman Group, плавные анимации при навигации на 37% повышают удобство восприятия контента. Это напрямую влияет на длительность сессии и конверсию. 📊

Анна Соколова, UX-директор Однажды нашей команде поступил заказ на редизайн сайта инвестиционной компании. Владелец жаловался на высокий показатель отказов — люди просто покидали сайт, не доходя до ключевых разделов. Когда мы провели UX-аудит, обнаружили, что навигация работала рывками: пользователь кликал по меню и мгновенно оказывался в совершенно другой части страницы без какого-либо контекста. Внедрив smooth scrolling и несколько других микроанимаций, мы снизили показатель отказов на 18% за первый месяц. Но самое интересное — время, проводимое на сайте, увеличилось почти на треть. Когда мы опросили пользователей, многие отметили, что сайт стал "более логичным и предсказуемым", хотя основное содержание осталось практически без изменений. Именно тогда я поняла, что плавность интерфейса — это не просто эстетический элемент, а инструмент, напрямую влияющий на бизнес-показатели.

Давайте рассмотрим основные UX-преимущества плавной прокрутки более детально:

Теперь, когда мы понимаем важность плавной прокрутки, давайте рассмотрим различные способы её реализации. 💻

Реализация smooth scrolling на чистом JavaScript и CSS

Начнём с самого простого и универсального подхода — использования нативных возможностей CSS. Это решение отлично подойдет для базовых проектов и имеет отличную поддержку современными браузерами.

Вот как реализуется плавная прокрутка с помощью CSS:

html {
scroll-behavior: smooth;
}

Да, всего одна строчка CSS-кода может преобразить ваш сайт! Это свойство применяется ко всем навигационным действиям, включая клики по якорным ссылкам и программную прокрутку с помощью JavaScript-методов типа window.scroll().

Однако для более точного контроля или для работы со старыми браузерами потребуется JavaScript-решение:

// Функция плавной прокрутки к элементу
function smoothScrollTo(element) {
const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
const startPosition = window.pageYOffset;
const distance = targetPosition – startPosition;
const duration = 1000; // ms
let startTime = null;

function animation(currentTime) {
if (startTime === null) startTime = currentTime;
const timeElapsed = currentTime – startTime;
const run = ease(timeElapsed, startPosition, distance, duration);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}

// Функция сглаживания (easing)
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t – 2) – 1) + b;
}

requestAnimationFrame(animation);
}

// Применение к ссылкам
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetElement = document.querySelector(this.getAttribute('href'));
if (targetElement) {
smoothScrollTo(targetElement);
}
});
});

Этот подход даёт больше контроля над анимацией прокрутки, включая длительность и функцию сглаживания (easing function). 🎛️

Для современных браузеров можно использовать метод scrollIntoView, который является более элегантным решением:

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

Преимущества и недостатки разных подходов к реализации на чистом коде:

Дмитрий Корнев, Frontend-разработчик Работая над крупным e-commerce проектом, я столкнулся с проблемой — на странице товара было множество секций, и пользователям было сложно между ними ориентироваться. Первоначально я использовал jQuery-решение для плавной прокрутки, но оно создавало заметные проблемы с производительностью, особенно на мобильных устройствах. Решил перейти на чистый JavaScript с requestAnimationFrame. Потратил целый день, тщательно оптимизируя функцию easing и учитывая различные крайние случаи — например, что делать, если пользователь запускает новую прокрутку, когда предыдущая ещё не закончилась. Результаты превзошли ожидания. FPS на мобильных устройствах увеличился с 45-50 до стабильных 58-60, исчезли все рывки даже на страницах с тяжелой графикой. Но самым удивительным оказалось то, что пользователи стали проводить на 23% больше времени на страницах товаров и просматривать на 17% больше характеристик продукта. Это прямо сказалось на конверсии, которая выросла на 6.5% — внушительная цифра для проекта такого масштаба.

Плавная прокрутка с помощью jQuery: готовые решения

Несмотря на растущую популярность нативных решений, jQuery остаётся мощным инструментом для быстрой реализации smooth scrolling, особенно когда вам нужно обеспечить кроссбраузерность с минимальными усилиями.

Базовая реализация плавной прокрутки с помощью jQuery выглядит следующим образом:

$('a[href^="#"]').on('click', function(event) {
event.preventDefault();

$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 800); // скорость прокрутки в миллисекундах
});

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

Для более продвинутых случаев можно использовать дополнительные опции jQuery animation:

$('a[href^="#"]').on('click', function(event) {
event.preventDefault();

var target = $($.attr(this, 'href'));

if(target.length) {
$('html, body').animate({
scrollTop: target.offset().top – 70 // компенсация для фиксированного хедера
}, {
duration: 1000,
easing: 'easeInOutCubic', // требует jQuery UI или плагин easing
complete: function() {
// действие после завершения анимации
target.addClass('highlight').delay(2000).removeClass('highlight');
}
});
}
});

Популярным решением для jQuery является плагин jQuery.scrollTo, который предлагает расширенные возможности:

// Подключите плагин jQuery.scrollTo
// <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>

$('a[href^="#"]').on('click', function(event) {
event.preventDefault();
var target = $($.attr(this, 'href'));

$.scrollTo(target, 800, {
offset: -50,
easing: 'swing',
onAfter: function() {
// код, который выполнится после прокрутки
}
});
});

Вот сравнение различных вариантов реализации плавной прокрутки с jQuery:

• Базовый jQuery.animate() — подходит для простых проектов без сложной анимации.
• jQuery с расширенной конфигурацией — позволяет добавлять callback-функции и настраивать поведение.
• Специализированные плагины — обеспечивают дополнительную функциональность и оптимизацию.

Однако необходимо понимать, что jQuery добавляет дополнительную зависимость к вашему проекту. Если библиотека уже используется для других задач — отлично, но если нет, стоит рассмотреть нативные решения или легковесные альтернативы. 🧐

Библиотеки и плагины для быстрого внедрения smooth scrolling

Когда нет времени на разработку собственного решения, на помощь приходят специализированные библиотеки. Они позволяют реализовать продвинутую плавную прокрутку буквально за считанные минуты. Рассмотрим самые эффективные варианты. 📚

1. SmoothScroll.js — легковесная библиотека (3Кб) без зависимостей:

// Подключение
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>

// Инициализация
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 800,
offset: 50, // смещение в пикселях
easing: 'easeInOutCubic',
updateURL: true // обновлять URL с хэшем
});

2. Locomotive Scroll — модульная библиотека для создания эффектов параллакса и smooth scrolling:

// Установка через npm
// npm install locomotive-scroll

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true,
multiplier: 1, // скорость прокрутки
lerp: 0.1, // фактор сглаживания (0-1)
smartphone: { smooth: true },
tablet: { smooth: true }
});

3. GSAP ScrollToPlugin — часть профессиональной анимационной платформы:

// Подключение
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollToPlugin.min.js"></script>

// Использование
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));

gsap.to(window, {
duration: 1, // секунды
scrollTo: {
y: target,
offsetY: 50
},
ease: "power3.inOut" // функция сглаживания
});
});
});

Сравнительный анализ популярных библиотек для smooth scrolling:

Выбор библиотеки зависит от конкретных требований проекта:

• Для небольших сайтов — SmoothScroll.js будет оптимальным решением благодаря своему минимальному размеру и простоте интеграции.
• Для творческих портфолио — Locomotive Scroll позволит создать впечатляющие эффекты параллакса.
• Для сложных корпоративных проектов — GSAP предоставит максимальную гибкость и контроль над анимациями.

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

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

Даже самая элегантная плавная прокрутка может стать источником проблем, если она вызывает фризы и подтормаживания. Оптимизация — ключевой этап внедрения smooth scrolling, особенно для страниц с обилием контента и сложными анимациями. 🚀

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

• Блокировка основного потока JavaScript при выполнении тяжелых вычислений.
• Частые перерисовки DOM-элементов (reflow).
• Неоптимизированные анимации, выполняемые не на GPU.
• Слишком большое количество событий scroll и resize.

Рассмотрим основные техники оптимизации:

1. Используйте requestAnimationFrame вместо setTimeout/setInterval

// Вместо этого
let scrollPos = window.pageYOffset;
const targetPos = 1000;
const step = 20;

const scrollAnimation = setInterval(() => {
if (scrollPos >= targetPos) {
clearInterval(scrollAnimation);
return;
}
scrollPos += step;
window.scrollTo(0, scrollPos);
}, 15);

// Используйте это
function smoothScroll() {
const currentPos = window.pageYOffset;
const targetPos = 1000;
const distance = targetPos – currentPos;
const duration = 500; // ms
let startTime = null;

function animation(currentTime) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime – startTime;
const progress = Math.min(elapsed / duration, 1);

window.scrollTo(0, currentPos + distance * progress);

if (progress < 1) {
requestAnimationFrame(animation);
}
}

requestAnimationFrame(animation);
}

2. Оптимизируйте CSS-свойства для анимаций

Используйте свойства, которые затрагивают только композицию (не вызывают reflow):

• transform
• opacity
• filter

Избегайте анимации свойств, вызывающих пересчёт макета:

• width/height
• top/left/bottom/right
• margin/padding

3. Применяйте throttling и debouncing для обработчиков событий

// Функция throttle для ограничения частоты вызовов
function throttle(func, limit) {
let inThrottle;
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
}
}

// Применение к обработчику прокрутки
window.addEventListener('scroll', throttle(function() {
// Код, который выполняется при прокрутке, но не чаще чем раз в 100мс
updateElementsOnScroll();
}, 100));

4. Используйте вычисления на GPU с помощью will-change

.animated-element {
will-change: transform;
/* Предупреждаем браузер о планируемых изменениях */
}

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

5. Оптимизируйте число элементов, задействованных в анимации

Измеряйте производительность вашей плавной прокрутки с помощью инструментов разработчика в браузере:

• Chrome DevTools Performance панель
• FPS-счётчик (можно включить в Chrome DevTools)
• Lighthouse аудит для обнаружения проблем с производительностью

Контрольные показатели для гладкой анимации прокрутки:

• Стабильные 60 FPS (или соответствующие частоте обновления экрана).
• Отсутствие сообщений о forced reflow в консоли разработчика.
• Время отклика интерфейса не более 100мс.

При оптимизации важно всегда тестировать производительность на реальных устройствах, особенно на мобильных с более ограниченными ресурсами. 📱

Внедрение плавной прокрутки — это баланс между эстетикой и производительностью. Независимо от выбранного вами метода, помните, что конечная цель — улучшение пользовательского опыта, а не его усложнение. Хороший smooth scrolling должен быть настолько естественным, что пользователь даже не задумывается о технологии за ним. Как и с любым интерфейсным решением, ключ к успеху — в деталях, тестировании на реальных устройствах и постоянной оптимизации. Именно такой подход превращает обычный сайт в продукт, который пользователи помнят и к которому возвращаются.