scrollToElement.js

import raf from 'raf';

/**
 * Функция для создания нелинейной анимации, с плавным стартом и затуханием
 * @method easeInOutQuad
 * @private
 * @param  {Number}      time      Промежуток времени с момента начала анимации
 * @param  {Number}      value     Начальное значение
 * @param  {Number}      delta     Разница между конечным и начальным значением
 * @param  {Number}      duration  Продолжительность анимации в милисекундах
 * @return {Number}
 */
function easeInOutQuad(time, value, delta, duration) {
    time /= duration / 2;

    if (time < 1) {
        return delta / 2 * time * time + value;
    }

    time--;

    return -delta / 2 * (time * (time - 2) - 1) + value;
}

/**
 * Плавно скролит елемент до указанного значения
 * @method scrollToElement
 * @param  {HTMLElement}   element   DOM элемент
 * @param  {Number}        value     Позиция скролла
 * @param  {Number}        duration  Продолжительность анимации в милисекундах
 */
function scrollToElement(element, value, duration = 500) {
    var initialValue = element.scrollTop;
    var startTime = typeof window.performance !== 'undefined' ?
        window.performance.now() : Date.now();

    var tick = function (time) {
        var elapsedTime = time - startTime;

        if (elapsedTime >= duration) {
            element.scrollTop = value;
        } else {
            element.scrollTop = easeInOutQuad(elapsedTime, initialValue, value - initialValue, duration);

            raf(tick);
        }
    };

    raf(tick);

}

export default scrollToElement;