JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="top">
Top of page
</div>
<a href="#somewhere" class="scroll-to">Scroll to #somewhere</a>
<p>Phasellus accumsan cursus velit. Nam adipiscing. Sed cursus turpis vitae tortor. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Quisque ut nisi.</p>
<p>Vivamus elementum semper nisi. Vivamus in erat ut urna cursus vestibulum. Praesent turpis. Pellentesque commodo eros a enim. Nam eget dui.</p>
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. In ut quam vitae odio lacinia tincidunt. Nullam sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst.</p>
<p>Fusce pharetra convallis urna. In turpis. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Etiam ultricies nisi vel augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>
<p>Curabitur nisi. Aenean vulputate eleifend tellus. Praesent nec nisl a purus blandit viverra. Nullam quis ante. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<p>Phasellus accumsan cursus velit. Nam adipiscing. Sed cursus turpis vitae tortor. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Quisque ut nisi.</p>
<p>Vivamus elementum semper nisi. Vivamus in erat ut urna cursus vestibulum. Praesent turpis. Pellentesque commodo eros a enim. Nam eget dui.</p>
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. In ut quam vitae odio lacinia tincidunt. Nullam sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst.</p>
<p>Fusce pharetra convallis urna. In turpis. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Etiam...

CSS

body{
  font-family: monospace;
}

div{
  font-size: 2em;
  font-weight: bold;
}

a{
  background-color: #f00;
  color: #fff;
  display: inline-block;
  padding: 0.5em;
  margin: 0.5em 0;
}

JavaScript

/**
 * 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  {number}   buffer      Optional vertical buffer
 * @return {boolean}
 */
function scrollTo(destination, duration, buffer){

  var from,
      to,
      start = new Date().getTime(),
      diff,
      mod_shift,
      callback,
      element = document.body;

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

  // Destination
  switch(typeof destination){

    case 'number':
      destination = destination;
      break;

    case 'string':
      var elem = document.querySelector(destination);
      if(!elem){ return false; }
      destination = (window.scrollY || window.pageYOffset) + elem.getBoundingClientRect().top;
      break;

    case 'object':
      if(!destination.nodeType){ return false; }
      destination = (window.scrollY || window.pageYOffset) + destination.getBoundingClientRect().top;
      break;

    default:
      return false;

  }

  // Buffer
  if(typeof buffer === 'number'){

    destination -= buffer;

  }

  // Process below max fold
  destination = Math.max(0, Math.min(destination, Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight) - window.innerHeight));

  // Directional defaults
  from = (window.scrollY || window.pageYOffset);
  to   = destination;
	diff = to - from;

  // Duration
  if(typeof duration !== 'number'){

    duration = 1000;

  }
  duration = Math.abs(duration);
  
  // Ease-out cubic equation 
  var easing = function(t, b, c, d){

    t /= d;
    t--;
    return c*(t*t*t + 1) + b;

  };
  
  // Scroll disable
  var disable_scroll = function(e){
  	
    e.preventDefault();
    return false;
    
  }
 ...