"Анимация прокрутки страницы вверх без jQuery: решение"

Быстрый ответ

Для реализации плавной анимации scrollTop полноценно достаточно базового JavaScript. Преимущественно используйте функцию requestAnimationFrame, чтобы обеспечить высокую эффективность анимации. Вот упрощенный пример кода:

const smoothScrollTo = (end, duration) => {
  const start = window.scrollY;
  const change = end – start;
  let currentTime = 0;
  
  const easeInOutQuad = (time, start, change, duration) => {
    time /= duration / 2;
    if (time < 1) return (change / 2) * time * time + start;
    time--;
    return (-change / 2) * (time * (time – 2) – 1) + start;
  };

  const animateScroll = () => {
    currentTime += 20;
    const val = easeInOutQuad(currentTime, start, change, duration);
    window.scrollTo(0, val);
    if (currentTime < duration) {
      requestAnimationFrame(animateScroll);
    }
  };
  animateScroll();
};

smoothScrollTo(0, 1000); // Осуществляем плавную прокрутку вверх в течение 1 секунды, без ненужных пауз на кофе.

Функция smoothScrollTo помогает нам плавно дойти до указанной позиции с помощью динамичной анимации, генерируемой функцией easeInOutQuad.

Соблюдение производительности критично, чтобы избежать заторможенности в работе прокрутки. requestAnimationFrame — этот инструмент для современных браузеров гарантирует устойчивую частоту кадров и оптимальное потребление процессора.

Понимание сущности – функция сглаживания

Функция easeInOutQuad в мире анимаций действует как волшебная палочка, она позволяет создавать действия, имитирующие естественное ускорение и замедление.

Применяемый нами эффект ease-in-out создает плавность прокрутки: начинается медленно, потом ускоряется и снова замедляется к концу.

Все браузеры равны, но некоторые равнее других

Проверка работы скрипта в различных браузерах – неотъемлемый этап. requestAnimationFrame поддерживается большинством из них, но в старых версиях могут возникнуть сложности и потребуется полифилл. Так, window.scrollY – это неизвестное для старых версий Internet Explorer, альтернативой ему может стать document.documentElement.scrollTop.

Производительность и альтернативы для браузеров

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

Для браузеров без поддержки requestAnimationFrame, можно использовать альтернативу с setTimeout:

// Замена на setTimeout, если requestAnimationFrame недоступен
window.requestAnimationFrame = window.requestAnimationFrame || function(callback) { 
  return setTimeout(callback, 1000 / 60);
}

Визуализация: Путешествие к вершине

Можно представить плавную прокрутку как поездку без использования автомагистрали jQuery:

Окно браузера 🖼️ : |______________📍(Вы здесь)_______________|
    ↗️↗️↗️↗️↗️ (Плавное движение вверх)
Цель 🏁: |___________________________________________|

Каждая стрелка ↗️ символизирует наш шаг к вершине страницы. Метод scrollTo позволит плавно дойти до нее, опираясь исключительно на стандартные средства JavaScript.

Реализуйте универсальность и легкость поддержки вашей прокрутки

Чистота и простота кода являются ключевыми аспектами при создании анимации прокрутки.

Функция сглаживания: В разработке

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

const easeInOutQuad = (time, start, change, duration) => { /* ... */ };

Подробнее об этом расскажет наш спикер на видео

Согласие параметрам

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

const smoothScrollTo = (start, end, duration) => { /* ... */ };

Управление исключениями с изяществом

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

// Проверка корректности duration и обработка ошибки
if (duration <= 0 || typeof duration !== 'number') {
  console.error('Некорректная продолжительность: значение должно быть положительным числом');
}

Полезные материалы

1. Element: scrollTop property – Веб-API | MDN — все развернуто о свойстве scrollTop.
2. Window: requestAnimationFrame() method – Веб-API | MDN — метод для создания эффективных анимаций.
3. Smooth Scrolling | CSS-Tricks — осваиваем плавную прокрутку без использования jQuery.
4. scrollTop анимация без jquery – Stack Overflow — реальные примеры и обсуждения на тему.
5. Как создать эффект плавной прокрутки — урок по созданию плавной прокрутки.
6. Руководство по Vanilla Ajax без jQuery — SitePoint — использование Ajax без применения jQuery.
7. Анимации на JavaScript — концепции JS-анимаций.