Дата публикации
20 Апреля 2020
Дата изменения
19 Июня 2020
Уникальных просмотров
240

Оглавление

Все знают что «кнопка вверх» довольно удобна для пользователей на сайтах. Однако не всегда хочется ради анимации подключать библиотеку 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();
}

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

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

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

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

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

Благодарность автору

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

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,1318 s
Время запросов: 0,1318 s
Количество запросов: 26
Источник: cache