JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red"></div>
<div class="green"></div>
<div class="yellow"></div>

CSS

body{
  margin:0;
}

 div {
    height:1000px;
    width:100%;
    opacity:0.1
    }

    .red{
    background:red;
    }

    .green{
    background:green;
    }

    .yellow{
    background:yellow;
    }

JavaScript

var handler = function(e) {
  e = e || window.event;
  var k = e.keyCode || e.which;
  switch (k) {
    case 38:
      //document.body.scrollTop -= 1000;
      //document.documentElement.scrollTop -= 1000;
      animateScroll(true);
      break;
    case 40:
 //     document.body.scrollTop += 1000;
 //     document.documentElement.scrollTop += 1000;
     animateScroll(false);
      break;
    default:
      return true;
  }
  if (e.preventDefault) e.preventDefault();
  return false;
};
if (window.attachEvent) window.addEvent("onkeydown", handler, false);
else window.addEventListener("keydown", handler, false);


function animateScroll(up){ 
	var count = 1000; 
	
  function animate(){
    if(up){
		document.body.scrollTop-=100; 
		document.documentElement.scrollTop-=100;    
    }else{
    		document.body.scrollTop+=100; 
  		document.documentElement.scrollTop+=100;
    }
	} 

	var interval = setInterval(function(){ 
		if(count > 0){ 
			animate(); 
      count = count - 100; 
		}else{ 
			clearInterval(interval); 
		} 
	},20);

}