JSFiddle - React, Tailwind, and code Playground

JavaScript

window.addEventListener('DOMContentLoaded', init);

function getCoord(elem){
	var box = elem.getBoundingClientRect();

	var top = box.top + pageYOffset;

	return top;
}
function init(){
	var btn = document.getElementsByClassName('myscroll');

	for(i = 0; i<btn.length; i++){
		var	timePassed = 0;
		var start = 0;
		btn[i].addEventListener('click', function(){
			var cur = document.documentElement.scrollTop;
			var child = this.getElementsByTagName('a');
			var subHash = child[0].hash.substr(1);
			// var hash = window.location.hash;
			// var subHash = hash.substr(1);
			var id = document.getElementById(subHash);
			var coord = getCoord(id);

			if(cur < coord){
				var timer = setInterval(function(){
					timePassed = timePassed + 20;
					document.documentElement.scrollTop = start + timePassed;

					if(document.documentElement.scrollTop >= coord){
						start = start + timePassed;
						timePassed = 0;
						clearInterval(timer);
						return;
					}
					console.log(timePassed);
				
				}, 20);
			} else if(cur > coord){
				var timer = setInterval(function(){
					start = document.documentElement.scrollTop;
					timePassed = start - 20;

					document.documentElement.scrollTop = timePassed;
					if(document.documentElement.scrollTop <= coord){
						start = timePassed;
						clearInterval(timer);
						return;
					}
					console.log(timePassed);
				}, 20);
			}
		});
	}
}