添加效果到网站滚动

Question

我使用箭头键滚动网站内容。我想为此添加滚动计时和滚动效果。

我知道有很多库使用jquery来做这件事。我想在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;
      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

这样的东西？它不是最终产品，但绝对是方式。

此答案基于another answer

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

我试图尽可能接近您的代码

https://jsfiddle.net/hp7po95j/

根据您的意愿调整数字以使其更顺畅

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

}