Добавить эффекты на веб-сайт прокрутки

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

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

Я старался быть как можно ближе к коду

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

}