Add effects to website scroll

Question

I am scrolling the website content using arrow keys. I want to add scroll timings and scroll effects to this.

I know there are many libraries which uses jquery to do this. I want the solution in javascript. Please help.

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;
      break;
    case 40:
      document.body.scrollTop += 1000;
      document.documentElement.scrollTop += 1000;
      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);

div {
  height: 1000px;
  width: 100%;
}
.red {
  background: red;
}
.green {
  background: green;
}
.yellow {
  background: yellow;
}

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

Answer 1

Something like this? It's not the final product but it definitely the way.

This answer is based on another answer

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;
      scrollBy(document.body.scrollTop - 1000, 500);
      break;
    case 40:
      //document.body.scrollTop += 1000;
      //document.documentElement.scrollTop += 1000;
      scrollBy(document.body.scrollTop + 1000, 500);
      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 scrollBy(to, duration) {
  if (duration <= 0) return;
  var difference = to - document.body.scrollTop;
  var perTick = difference / duration * 10;

  setTimeout(function() {
    document.body.scrollTop = document.body.scrollTop + perTick;
    if (document.body.scrollTop == to) return;
    scrollBy(to, duration - 10);
  }, 10);
}

div {
  height: 1000px;
  width: 100%;
}
.red {
  background: red;
}
.green {
  background: green;
}
.yellow {
  background: yellow;
}

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

http://jsbin.com/goqadek/edit?html,css,js

Answer 2

I have tried to be as close to your code

https://jsfiddle.net/hp7po95j/

fiddle around with the numbers to make it smoother as per your wish

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);

}