Реалізація кнопки «Нагору»: верстка, JS, accessibility
Користувач на сторінці з довгим контентом витрачає від 5 до 10 секунд на ручне прокручування вгору. Відсутність кнопки «Нагору» збільшує показник відмов на 20–30%. Особливо гостро це проявляється на лендингах з нескінченною прокруткою та в інтернет-магазинах з тисячами товарів. Команда Truetech має 5+ років досвіду в розробці компонентів навігації та реалізувала понад 50 проектів з кнопкою «Нагору». За останні роки наші інженери реалізували понад 50 таких компонентів для проектів різної складності — від простих лендингів до складних SPA.
Чому важлива accessibility для кнопки «Нагору»?
Стандартна реалізація часто ігнорує скрінрідери та клавіатурну навігацію. Без aria-label і правильного управління фокусом кнопка стає недоступною для людей з обмеженими можливостями. Це суперечить WCAG 2.1 і може призвести до судових позовів. Ми обов'язково додаємо aria-hidden для невидимого стану і переводимо tabIndex у -1, щоб не порушувати порядок обходу.
Як кнопка «Нагору» впливає на Core Web Vitals?
Неправильна реалізація — наприклад, прив'язка до події scroll без троттлінгу — викликає часті рекалькуляції стилів та збільшує Cumulative Layout Shift (CLS). Використання requestAnimationFrame з прапорцем ticking і пасивних слухачів ({ passive: true }) усуває ці проблеми. Для важких сторінок застосовуємо IntersectionObserver замість scroll — це знижує навантаження на основний потік на 40% порівняно зі звичайним scroll-слухачем. Додатково, IntersectionObserver зменшує кількість перемальовок у 2.5 рази, що покращує Core Web Vitals.
Як ми реалізуємо Back-to-Top кнопку?
Стек: TypeScript, React 18 / Vanilla JS, CSS Transitions. Приклад з практики: для інтернет-магазину з 50 000 товарів реалізували кнопку з прогресом читання. Залученість зросла на 12% відносно стандартної кнопки без прогресу, кількість скарг на навігацію впала на 30%. Для сайту з блогом на 10 000 статей впровадили кнопку з IntersectionObserver — це скоротило кількість обробників scroll на 80%. Наша кнопка з прогресом читання у 2.5 рази ефективніша за стандартну кнопку.
Базова розмітка та стилі
<button class="back-to-top" id="backToTop" aria-label="Прокрутити вгору" title="Нагору" hidden>
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path d="M12 4l-8 8h5v8h6v-8h5z" fill="currentColor"/>
</svg>
</button>
.back-to-top {
position: fixed;
bottom: 32px;
right: 32px;
z-index: 50;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: #6366f1;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
transition: opacity 0.3s, transform 0.3s, background 0.2s;
}
.back-to-top[hidden] {
display: flex !important;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
}
.back-to-top:not([hidden]) {
opacity: 1;
transform: translateY(0);
}
.back-to-top:hover {
background: #4f46e5;
transform: translateY(-2px);
}
.back-to-top:active {
transform: translateY(0);
}
@media (max-width: 768px) {
.back-to-top {
bottom: calc(72px + env(safe-area-inset-bottom));
right: 16px;
width: 40px;
height: 40px;
}
}
Логіка появи через requestAnimationFrame:
const btn = document.getElementById('backToTop') as HTMLButtonElement
const SHOW_THRESHOLD = 400
let ticking = false
window.addEventListener('scroll', () => {
if (ticking) return
ticking = true
requestAnimationFrame(() => {
btn.hidden = window.scrollY < SHOW_THRESHOLD
ticking = false
})
}, { passive: true })
btn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' })
const firstFocusable = document.querySelector<HTMLElement>('a[href], button:not([disabled]), [tabindex="0"]')
firstFocusable?.focus({ preventScroll: true })
})
React-компонент з управлінням TabIndex
import { useEffect, useState } from 'react'
export function BackToTop({ threshold = 400 }: { threshold?: number }) {
const [visible, setVisible] = useState(false)
useEffect(() => {
let ticking = false
const handler = () => {
if (ticking) return
ticking = true
requestAnimationFrame(() => {
setVisible(window.scrollY > threshold)
ticking = false
})
}
window.addEventListener('scroll', handler, { passive: true })
return () => window.removeEventListener('scroll', handler)
}, [threshold])
function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' })
}
return (
<button
onClick={scrollToTop}
className={`back-to-top ${visible ? 'back-to-top--visible' : ''}`}
aria-label="Прокрутити вгору"
aria-hidden={!visible}
tabIndex={visible ? 0 : -1}
>
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path d="M12 4l-8 8h5v8h6v-8h5z" fill="currentColor"/>
</svg>
</button>
)
}
Варіант з прогресом читання
function BackToTopWithProgress({ threshold = 400 }: { threshold?: number }) {
const [visible, setVisible] = useState(false)
const [progress, setProgress] = useState(0)
useEffect(() => {
const handler = () => {
const scrollY = window.scrollY
const maxScroll = document.documentElement.scrollHeight - window.innerHeight
setProgress(maxScroll > 0 ? (scrollY / maxScroll) * 100 : 0)
setVisible(scrollY > threshold)
}
window.addEventListener('scroll', handler, { passive: true })
return () => window.removeEventListener('scroll', handler)
}, [threshold])
const circumference = 2 * Math.PI * 18
const dashOffset = circumference - (progress / 100) * circumference
return (
<button
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
className={`back-to-top-progress ${visible ? 'visible' : ''}`}
aria-label={`Прокрутити вгору. Прочитано ${Math.round(progress)}%`}
tabIndex={visible ? 0 : -1}
>
<svg viewBox="0 0 44 44" width="44" height="44">
<circle cx="22" cy="22" r="18" fill="none" stroke="#e2e8f0" strokeWidth="3" />
<circle cx="22" cy="22" r="18" fill="none" stroke="#6366f1" strokeWidth="3" strokeDasharray={circumference} strokeDashoffset={dashOffset} strokeLinecap="round" transform="rotate(-90 22 22)" />
<path d="M22 14l-6 6h4v8h4v-8h4z" fill="#6366f1" />
</svg>
</button>
)
}
Плавність скролу та вподобання користувача
Для базового згладжування використовуйте scroll-behavior: smooth у CSS. Обов'язково відключайте анімацію, якщо користувач активував prefers-reduced-motion: reduce. У JS перевіряйте через window.matchMedia('(prefers-reduced-motion: reduce)') і змінюйте behavior на 'instant'. Це вимога WCAG. Кнопка з урахуванням prefers-reduced-motion — приклад коректної accessibility кнопки, яка не викликає дискомфорту у користувачів з вестибулярними розладами.
| Параметр | Проста кнопка | З прогресом |
|---|---|---|
| Складність реалізації | 1 година | 4 години |
| Поліпшення UX | +10% | +15% |
| Навантаження на браузер | Мінімальне | Низьке |
| Адаптивність | Так | Так |
Порівняння підходів: IntersectionObserver vs scroll
| Характеристика | IntersectionObserver | Подія scroll |
|---|---|---|
| Навантаження на основний потік | Низьке | Високе |
| Частота спрацьовування | По перетину | Кожен піксель |
| Додаткова оптимізація | Не потрібна | requestAnimationFrame |
| Приріст продуктивності | +40% | Базовий |
Поширені помилки та їх вирішення
| Помилка | Рішення |
|---|---|
Відсутність aria-label і aria-hidden |
Додати атрибути та керувати tabIndex |
Використання scroll без requestAnimationFrame |
Застосувати requestAnimationFrame з прапорцем ticking |
Жорсткі відступи без safe-area-inset |
Використати env(safe-area-inset-bottom) |
| Фокус не повертається після кліку | В обробнику кліку перенаправляти фокус на перший фокусований елемент |
Відсутність плавного скролу при prefers-reduced-motion |
Перевіряти медіа-запит і змінювати behavior на instant |
Процес роботи
- Аналіз — визначаємо поріг скролу, стилі під ваш брендбук, сумісність з оточенням.
- Реалізація — пишемо чистий код на обраному стеку (Vanilla JS, React, Vue). Вартість цього етапу: від 2 000 грн (проста кнопка) до 5 000 грн (з прогресом).
- Тестування — перевіряємо у Firefox, Chrome, Safari на десктопі та смартфонах, з увімкненою та вимкненою анімацією.
- Інтеграція — вбудовуємо в проект, налаштовуємо збірку, виключаємо дублі.
- Підтримка — передаємо документацію, консультуємо розробників.
Що входить у роботу
- Вихідний код компонента (JS/TS, CSS)
- Інструкція з інтеграції
- Тестова сторінка з демонстрацією
- Гарантія сумісності з сучасними браузерами (IE11 за запитом)
- Підтримка 30 днів після здачі
Типові помилки при самостійній реалізації
- Відсутність
aria-labelіaria-hidden— кнопка недоступна для скрінрідерів. - Використання
scrollбезrequestAnimationFrame— провали у продуктивності. - Жорстко задані відступи без урахування
safe-area-inset— на iPhone кнопка перекриває інтерфейс. - Відсутність обробки клавіатурного фокусу — після кліку фокус залишається на кнопці.
Строки та вартість
Строки: від 1 дня (проста кнопка) до 2 днів (з прогресом і повною accessibility). Вартість: від 2 000 грн (проста) до 5 000 грн (з прогресом). Отримайте консультацію — оцінимо ваш проект за 15 хвилин. Замовте впровадження компонента у вашому проекті — ми врахуємо всі нюанси навігації та UX.
Деталі вартості та термінів
Вартість впровадження простої кнопки — від 2 000 грн, з прогресом — від 5 000 грн. Строки: 1–2 дні. Економія часу користувачів — до 30% на навігації.Рекомендації з accessibility: MDN - scroll-behavior