Создание кнопки вверх с анимацией на чистом JS

Оглавление

• Функция, для прокрутки с контролем скорости
• Готовый пример

Все знают что «кнопка вверх» довольно удобна для пользователей на сайтах. Однако не всегда хочется ради анимации подключать библиотеку jQuery. Посему, пару месяцев назад, на просторах стаковерфлоу нашел довольно неплохой и что немаловажно — кроссбраузерный вариант реализации прокрутки страницы с анимацией на ванильном JavaScript и решил выложить его здесь. Решение не мое.

Функция, для прокрутки с контролем скорости

Собственно сама функция, которая будет реализовывать плавный скролл до элемента:

/*   --------------------------------------------------------------*/
/*  Функция для прокрутки с контролем скорости
/*  --------------------------------------------------------------*/
function scrollTo(to, duration = 700) {
    const
        element = document.scrollingElement || document.documentElement,
        start = element.scrollTop,
        change = to - start,
        startDate = +new Date(),
        // t = current time
        // b = start value
        // c = change in value
        // d = duration
        easeInOutQuad = function (t, b, c, d) {
            t /= d / 2;
            if (t < 1) return c / 2 * t * t + b;
            t--;
            return -c / 2 * (t * (t - 2) - 1) + b;
        },
        animateScroll = function () {
            const currentDate = +new Date();
            const currentTime = currentDate - startDate;
            element.scrollTop = parseInt(easeInOutQuad(currentTime, start, change, duration));
            if (currentTime < duration) {
                requestAnimationFrame(animateScroll);
            }
            else {
                element.scrollTop = to;
            }
        };
    animateScroll();
}

Как я уже сказал, функция не моя. Её можно использовать не только для скролла вверх страницы, но и например до любого якоря. Я проверил работу функции на всех популярных браузерах:

• Chrome
• Firefox
• Safari
• Opera
• Edge
• Yandex Browser

Везде все работает. Теперь просто необходимо повесить функцию на событие:

document.addEventListener('DOMContentLoaded', function () {
    let btn = document.querySelector('#toTop');
    // При клике прокручиваем на самый верх
    btn.onclick = function (click) {
        click.preventDefault();
        // Вызываем функцию, первый аргумент - отступ, второй - скорость скролла, чем больше значение, тем медленнее скорость прокрутки
        scrollTo(0, 400);
    }
});

Готовый пример

Готовый пример работы скрипта и немного стилей можете найти в примере ниже: