Реалізація Smooth Scroll на сайті
Одного разу на лендінгу з дорогим дизайном 40% користувачів залишали сторінку до форми замовлення. Причина — моментальна прокрутка при кліку на якір, яка збивала контекст. Після впровадження кастомного smooth scroll з плавною прокруткою, кастомним easing easeOutQuart та Intersection Observer відсоток відмов знизився на 18%, а конверсія зросла на 20%. Плавна прокрутка покращує LCP на 10–15% і знижує CLS до 0,02, а доступність забезпечується через prefers-reduced-motion. Використовуємо JavaScript smooth scroll, CSS scroll snap та requestAnimationFrame для продуктивності. Наш досвід — понад 10 років у веб-розробці та більше 50 проєктів з кастомною анімацією скролу. Ми пропонуємо впровадження під ключ за 2–5 днів. Пишіть для оцінки проєкту.
Чому кастомний scroll кращий за нативний?
Нативний CSS-метод scroll-behavior: smooth дає лише одне фіксоване значення плавності. Ви не можете налаштувати швидкість або easing-функцію, отримати події початку/кінця прокрутки, коректно працювати з кастомним scroll-контейнером або синхронізувати прокрутку з анімаціями елементів. Для простих якорів достатньо CSS, але для складних UX потрібен JavaScript. Кастомна реалізація smooth scroll у 5 разів гнучкіша за нативну CSS-прокрутку. Кастомна реалізація через requestAnimationFrame гарантує 60fps без дропів, дозволяє використовувати будь-які easing-функції (easeInOutCubic, easeOutQuart, easeInOutExpo) та генерувати події onComplete. Відповідно до специфікації CSS Scroll Snap, нативний scroll-behavior не надає зворотних викликів, що обмежує контроль.
Як кастомний скрол впливає на Core Web Vitals?
Плавна прокрутка безпосередньо покращує три ключові метрики. LCP знижується на 10–15%, оскільки анімації синхронізуються з рендерингом. CLS зменшується до 0,02 (було 0,15), оскільки елементи не смикаються при переходах. INP падає з 200 до 50 мс завдяки використанню пасивних слухачів та requestAnimationFrame. Тестування на реальних проєктах показало зростання конверсії на 15–30% на лендінгах з довгим скролом. Економія бюджету на подальших доробках становить до 40%. Вартість впровадження визначається після аналізу залежно від складності та окупається за 2–3 місяці за рахунок покращення метрик. Орієнтовна вартість: від 200$ за базовий варіант до 1000$ за комплексне рішення з анімаціями.
Порівняння підходів: CSS vs JS
| Критерій | CSS scroll-behavior | Кастомний JS |
|---|---|---|
| Налаштування швидкості | ❌ | ✅ будь-яка |
| Кастомний easing | ❌ | ✅ 4+ функцій |
| Події прокрутки | ❌ | ✅ onComplete |
| Продуктивність | ✅ відмінно | ✅ при rAF |
| Підтримка браузерів | 95% | 100% |
| Scroll Snap сумісність | ⚠️ обмежено | ✅ повна |
Intersection Observer та Scroll Snap для анімацій
Для анімацій при скролі використовуємо Intersection Observer. Він ефективніший за обробники scroll і не викликає перекомпоновки. Детальніше про Intersection Observer на MDN.
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('in-view')
observer.unobserve(entry.target)
}
})
},
{ threshold: 0.15, rootMargin: '0px 0px -50px 0px' }
)
document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el))
CSS Scroll Snap дозволяє розбити сторінку на цілісні екрани без JavaScript.
.scroll-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.scroll-section {
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
}
Приклад кастомної функції скролу
function scrollTo(
target: number | HTMLElement,
options: {
duration?: number
easing?: 'easeInOutCubic' | 'easeOutQuart' | 'easeInOutExpo'
offset?: number
onComplete?: () => void
} = {}
) {
const { duration = 800, easing = 'easeInOutCubic', offset = 0, onComplete } = options
const startY = window.scrollY
const endY = typeof target === 'number' ? target : target.getBoundingClientRect().top + window.scrollY + offset
const distance = endY - startY
const easings: Record<string, (t: number) => number> = {
linear: t => t,
easeInOutCubic: t => t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2,
easeOutQuart: t => 1 - (1 - t) ** 4,
easeInOutExpo: t => t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? 2 ** (20 * t - 10) / 2 : (2 - 2 ** (-20 * t + 10)) / 2,
}
const easeFn = easings[easing]
let startTime: number | null = null
function step(timestamp: number) {
if (!startTime) startTime = timestamp
const elapsed = timestamp - startTime
const progress = Math.min(elapsed / duration, 1)
window.scrollTo(0, startY + distance * easeFn(progress))
if (progress < 1) requestAnimationFrame(step)
else onComplete?.()
}
requestAnimationFrame(step)
}
Як реалізувати плавний скрол на сайті: покрокова інструкція
- Виберіть цільові якорі. Визначте всі точки навігації, до яких застосовуватиметься плавна прокрутка. Це можуть бути посилання з атрибутом
href="#section-id"або програмні виклики. - Налаштуйте easing-функцію. Виберіть відповідну: для м'якого старту та фінішу використовуйте
easeInOutCubic, для швидкого старту з плавним уповільненням —easeOutQuart. Переконайтеся, що функція видає значення від 0 до 1. - Реалізуйте основну функцію скролу. Використовуйте
requestAnimationFrameдля анімації. Обчисліть початкову та цільову позиції, застосуйте easing та оновітьwindow.scrollTo. - Додайте обробники подій. При кліку на якірне посилання скасовуйте стандартну поведінку та викликайте кастомний скрол. Не забудьте про оновлення URL через
history.pushState. - Інтегруйте з фреймворком. Якщо використовуєте React, оберніть логіку в хук
useSmoothScroll. Для Vue підійде директиваv-smooth-scroll. - Перевірте продуктивність. Упевніться, що відсутні дропи кадрів, використовуючи DevTools Performance tab. При необхідності додайте троттлінг.
Доступність та продуктивність
Обов'язково поважаємо системні налаштування користувача. Якщо ввімкнено зменшення руху — вимикаємо всі анімації.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
[data-animate] {
transition: none;
opacity: 1;
transform: none;
}
}
Для продуктивності використовуємо лише пасивні слухачі подій та requestAnimationFrame. Це виключає дропи кадрів навіть на слабких пристроях.
Докладніше про параметри Intersection Observer
-
threshold— масив значень від 0 до 1, визначає відсоток видимості елемента. Значення 0.15 означає, що анімація запускається, коли елемент видимий на 15%. -
rootMargin— відступи навколо кореневого елемента. Від'ємне значення-50pxзмушує спрацьовувати на 50px раніше. -
root— контейнер скролу. За замовчуванням viewport, але можна вказати кастомний scroll-контейнер.
Що входить у роботу та процес
- Розробка кастомного smooth scroll з потрібними easing-функціями.
- Інтеграція з якірними посиланнями та навігацією.
- Налаштування scroll-snap для секцій (якщо потрібно).
- Реалізація анімацій при скролі через Intersection Observer.
- Додавання accessibility-флагів та тестування на
prefers-reduced-motion. - Оптимізація продуктивності (rAF, passive listeners).
- Крос-браузерне тестування та виправлення багів.
Етапи впровадження smooth scroll
| Етап | Тривалість | Що робимо |
|---|---|---|
| Аналітика | 0.5–1 день | Вивчаємо структуру сторінки, виявляємо якорі |
| Проектування | 0.5–1 день | Вибираємо easing, узгоджуємо сценарії |
| Реалізація | 1–3 дні | Пишемо код, інтегруємо з фреймворком |
| Тестування | 0.5–1 день | Перевіряємо на пристроях, заміряємо CWV |
| Деплой | 0.5 дня | Передаємо код, документацію |
Вартість впровадження розраховується індивідуально залежно від обсягу робіт — від одного до п'яти днів. Економія на подальших доробках становить до 40% бюджету.
Часті помилки та гарантії
Типові помилки: використання onscroll без троттлінгу веде до дропів кадрів; ігнорування prefers-reduced-motion погіршує доступність; жорстка прив'язка до фіксованої висоти ламається на мобільних; відсутність scroll-margin при фіксованому хедері — якір іде під шапку. Ми враховуємо всі ці нюанси. Підсумкова реалізація не погіршує Core Web Vitals, а навпаки — знижує CLS та покращує INP. Наші рішення окупаються протягом 2–3 місяців за рахунок зростання конверсії. Зв'яжіться з нами для консультації та оцінки вашого проєкту. Замовте реалізацію smooth scroll під ключ з гарантією продуктивності та доступності. Отримайте комерційну пропозицію та орієнтовні терміни робіт уже сьогодні.