Плавная анимация скролла: как улучшить UX и SEO сайта

Плавный скролл к якорям– один из простых способов повысить удобство сайта. Исследования показывают, что плавные переходы снижают показатель отказов и увеличивают время на сайте (Smashing Magazine, 2021).

Современная реализация (2024)

1. Нативный JavaScript (рекомендуемый способ)

document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const targetId = link.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    
    if (targetElement) {
      const headerHeight = document.querySelector('.header')?.offsetHeight || 0;
      window.scrollTo({
        top: targetElement.offsetTop - headerHeight,
        behavior: 'smooth'
      });
    }
  });
});

Плюсы:

• Не требует jQuery
• Лучшая производительность
• Поддержка всеми современными браузерами

Минусы:

• Нужен полифил для Safari < 14 (пример полифила)

2. jQuery-реализация (если проект уже использует jQuery)

$(function() {
  $('a[href^="#"]').on('click', function(e) {
    e.preventDefault();
    const targetId = $(this).attr('href');
    const targetElement = $(targetId);
    
    if (targetElement.length) {
      const headerHeight = $('.header').outerHeight() || 0;
      $('html, body').animate(
        { scrollTop: targetElement.offset().top - headerHeight },
        600 // Скорость анимации (мс)
      );
    }
  });
});

Плюсы:

• Работает в старых браузерах
• Простота для новичков

Минусы:

• Медленнее нативного JS
• Требует подключения jQuery

Дополнения для SEO и UX

1. Lazy Load для тяжелых секций
   Если страница долго грузится, плавный скролл может "тормозить". Решение – загружать контент по мере прокрутки.

2. Избегайте резких скачков
   Google учитываетCumulative Layout Shift (CLS). Плавный скролл не должен вызывать смещение элементов.

3. Анимация не должна быть слишком медленной
   Оптимальная скорость –300-600 мс. Более долгая анимация раздражает пользователей (NN Group, 2020).

Вывод

Лучший выбор в 2024– нативныйwindow.scrollTo({ behavior: 'smooth' })+ полифил для Safari.
jQuery-версия– подходит для legacy-проектов.
SEO-оптимизация– плавный скролл улучшает UX, но важно избегать ошибок CLS.