Реализация Smooth Scroll на сайте

Реализация Smooth Scroll на сайте

Плавный скролл — это не scroll-behavior: smooth в CSS. Это управление скоростью и характером прокрутки: инерция, easing, привязка к секциям, синхронизация с анимациями. Нативный CSS-вариант даёт одно фиксированное значение плавности без возможности настройки.

CSS-подход: когда достаточно

Для простых случаев — якорные ссылки внутри страницы, возврат наверх — нативного CSS хватает:

html {
  scroll-behavior: smooth;
}

/* Отступ при наличии фиксированного хедера */
[id] {
  scroll-margin-top: 80px;
}

// Якорная навигация
document.querySelectorAll('a[href^="#"]').forEach((link) => {
  link.addEventListener('click', (e) => {
    e.preventDefault()
    const target = document.querySelector(link.getAttribute('href')!)
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' })
    }
  })
})

Ограничения: нельзя настроить скорость, нет событий начала/конца прокрутки, не поддерживается во всех браузерах одинаково, не работает совместно с кастомным scroll-контейнером.

JavaScript-реализация без библиотек

Когда нужен контроль: кастомный easing, callbacks, программная прокрутка с разной скоростью.

type EasingFn = (t: number) => number

const easings: Record<string, EasingFn> = {
  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,
}

function scrollTo(
  target: number | HTMLElement,
  options: {
    duration?: number
    easing?: keyof typeof easings
    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 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)
    const eased = easeFn(progress)

    window.scrollTo(0, startY + distance * eased)

    if (progress < 1) {
      requestAnimationFrame(step)
    } else {
      onComplete?.()
    }
  }

  requestAnimationFrame(step)
}

Scroll Snap

CSS Scroll Snap привязывает прокрутку к секциям. Работает нативно и производительно, не требует JS.

.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;  /* или proximity */
}

.scroll-section {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;  /* запрет "перелёта" через секцию */
}

/* Горизонтальный snap для слайдера */
.slider {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

Отслеживание позиции скролла

Реактивное отслеживание для анимаций при скролле. Throttle через requestAnimationFrame вместо setTimeout:

class ScrollTracker {
  private scrollY = 0
  private ticking = false
  private listeners: Set<(y: number, direction: 'up' | 'down') => void> = new Set()
  private lastY = 0

  constructor() {
    window.addEventListener('scroll', this.onScroll, { passive: true })
  }

  private onScroll = () => {
    this.scrollY = window.scrollY

    if (!this.ticking) {
      requestAnimationFrame(() => {
        const direction = this.scrollY > this.lastY ? 'down' : 'up'
        this.listeners.forEach(fn => fn(this.scrollY, direction))
        this.lastY = this.scrollY
        this.ticking = false
      })
      this.ticking = true
    }
  }

  subscribe(fn: (y: number, direction: 'up' | 'down') => void) {
    this.listeners.add(fn)
    return () => this.listeners.delete(fn)
  }

  destroy() {
    window.removeEventListener('scroll', this.onScroll)
  }
}

// Использование
const tracker = new ScrollTracker()

tracker.subscribe((y, dir) => {
  // Скрыть хедер при скролле вниз, показать при скролле вверх
  header.classList.toggle('header--hidden', dir === 'down' && y > 100)
})

Intersection Observer для анимаций при появлении

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('in-view')
        // Отписаться если анимация одноразовая
        observer.unobserve(entry.target)
      }
    })
  },
  {
    threshold: 0.15,       // 15% элемента должно быть видно
    rootMargin: '0px 0px -50px 0px',  // отступ снизу
  }
)

document.querySelectorAll('[data-animate]').forEach((el) => {
  observer.observe(el)
})

[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay для групп */
[data-animate]:nth-child(1) { transition-delay: 0ms; }
[data-animate]:nth-child(2) { transition-delay: 100ms; }
[data-animate]:nth-child(3) { transition-delay: 200ms; }

Доступность

prefers-reduced-motion — системный флаг, который нужно уважать. Пользователи с вестибулярными расстройствами отключают анимацию в системных настройках.

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  [data-animate] {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches

// Если анимация не нужна — мгновенная прокрутка
function safeScrollTo(target: HTMLElement) {
  if (prefersReduced) {
    target.scrollIntoView()
  } else {
    scrollTo(target, { duration: 800 })
  }
}

Сроки

Якорная навигация + Intersection Observer анимации — полдня. Кастомный smooth scroll с easing, scroll-tracker для хедера и staggered анимациями — 1 день.