JSFiddle - React, Tailwind, and code Playground

by thezillion

HTML

<html>
    <head>
<script>
    function _(el){
  return document.getElementById(el);
}
var inc, topa, till = 0;
function scrollTo(elem){
  elem = elem.split('#')[1];
    elem = _(elem);
    topa = elem.offsetTop - 0;
  
  
  var timer = setInterval(function(){
    if (till < topa / 2){
        inc = topa * (Math.pow(0.2, 3));
    }
    else{
        inc = topa * (Math.pow((0.2), 3));
    }
     if (till < topa){
       till += inc;
       window.scrollBy(0, inc);
     }
    else{
       clearInterval(timer);
    }
  }, 1);
}
window.onload = function(){
  var a = document.getElementsByTagName('a');
  for (var i = 0; i<a.length; i++){
    var el = a[i].href;
    a[i].onclick = function(){
    scrollTo(el);
    return false;
    window.event.preventDefault();
    };
  }
};
        </script>   
<style>
 #boxy{
  height: 500px;
  background-color: black;
  margin-top: 150em;
}
    </style>    
    </head>
  <a href='#boxy'>Link1</a>
  <div id='boxy'>
    
  </div>
</html>