JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<tr>
    <th scope="row">Подробнее:</th>
    <td class="acceptlist" colspan="4">
    <a class="accept scroll_to" href="#nav1">СКРОЛЛ К ЭЛЕМЕНТУ</a>
    <a class="accept" href="#nav2">Схема взаимодействия с заказчиком</a>
    </td>
  </tr>
</table>
<div style='width:200px; height:400px; background:#ccc;'></div>
<section id="nav1">
    <h2>Что входит в сумму за метр бурения скважины.</h2>
    <ul class="skedlist">
    <li>.........</li>
    <li>.........</li>
     </ul>
</section>
<section id="nav2">
    <h2>Схема взаимодействия с заказчиком.</h2>
    <ol class="ollist">
    <li>.........</li>
    <li>.........</li>
    </ol>
</section>

JavaScript

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000/60);};
  window.requestAnimationFrame = requestAnimationFrame;
})();
/*******************************************************/
function scrollToTop(context){
    if(context > 0){
		var step = 50;
		context -= step
		document.body.scrollTop ? document.body.scrollTop = context : document.documentElement.scrollTop = context ;
		requestAnimationFrame(function(){ scrollToTop(context); });
	}
}
/*******************************************************/
function scrollToElement(elementScrollTop, context, sign){
	if(sign == '>'){
		if(context < elementScrollTop){
			var step = 50;
			context += step ;
			document.body.scrollTop = context ;
			document.documentElement.scrollTop = context ;
			requestAnimationFrame(function(){ scrollToElement(elementScrollTop, context, sign); });
		}
	}	
	else{
		if(context > elementScrollTop){
			var step = 50;
			context -= step ;
			document.body.scrollTop = context ;
			document.documentElement.scrollTop = context ;
			requestAnimationFrame(function(){ scrollToElement(elementScrollTop, context, sign); });
		}
	}	
}
/*******************************************************/	
var to_tops = document.querySelectorAll('.to_top');
for(var i = 0, length = to_tops.length; i < length; i++){
	to_tops[i].onclick = function(){
		var context = (document.body.scrollTop || document.documentElement.scrollTop);
		requestAnimationFrame(function(){ scrollToTop(context); });
	}
}
/*******************************************************/
var scroll_tos = document.querySelectorAll('.scroll_to');
for(i = 0, length = scroll_tos.length; i < length; i++){
	scroll_tos[i].onclick = function(){
		var target_selector = this.hash;
		var elementScrollTop =...