JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="block" id="block-1">#1</div>
<div class="block" id="block-2">#2</div>
<div class="block" id="block-3">#3</div>
<div class="block" id="block-4">#4</div>
<div class="block" id="block-5">#5</div>
<div class="block" id="block-6">#6</div>

CSS

.block{
  height: 300px;
  border-top: 1px solid #f00;
  margin-top: 10px;
}

JavaScript

/**
 * scrollTo
 */

/**
 * Linear progression
 * @param  {number} t Time elapsed
 * @param  {number} b Starting value
 * @param  {number} c Start end difference
 * @param  {number} d Duration
 * @return {number}   Delta updated value
 */
Math.linearTween = function(t, b, c, d){
  return c*t/d + b;
};


/**
 * Cubic ease-in progression
 * @param  {number} t Time elapsed
 * @param  {number} b Starting value
 * @param  {number} c Start end difference
 * @param  {number} d Duration
 * @return {number}   Delta updated value
 */
Math.easeIn = function(t, b, c, d){
  t /= d;
  return c*t*t*t + b;
};


/**
 * Cubic ease-out progression
 * @param  {number} t Time elapsed
 * @param  {number} b Starting value
 * @param  {number} c Start end difference
 * @param  {number} d Duration
 * @return {number}   Delta updated value
 */
Math.easeOut = function(t, b, c, d){
  t /= d;
  t--;
  return c*(t*t*t + 1) + b;
};


/**
 * Cubic ease-in-out progression
 * @param  {number} t Time elapsed
 * @param  {number} b Starting value
 * @param  {number} c Start end difference
 * @param  {number} d Duration
 * @return {number}   Delta updated value
 */
Math.easeInOut = function(t, b, c, d){
  t /= d/2;
  if (t < 1) return c/2*t*t*t + b;
  t -= 2;
  return c/2*(t*t*t + 2) + b;
};

/**
 * Scroll window to destination with duration and callback settings
 * @param  {mixed}    destination Scroll to pixel value, selector or DOM node
 * @param  {number}   duration    Animation in ms
 * @param  {string}   easing      Easing method
 * @param  {function} fn          Callback function
 * @return {boolean}
 */
function _scrollTo(destination, duration, easing, fn){
  var FROM,
      TO,
      START = new Date().getTime(),
      DIFF,
      modShift,
      callback,
      element = document.body;

  // Prevent propagation
  if(element.getAttribute('data-scrolling')){
    return false;
  }
  element.setAttribute('data-scrolling', true);
  
  // Destination
 	switch(typeof destination){
  	case...