Web sitesi kaydırmasına efekt ekleme

Question

Web sitesi içeriğini ok tuşlarını kullanarak kaydırıyorum. Kaydırma zamanlamaları eklemek ve buna kaydırma yapmak istiyorum.

Bunu yapmak için jquery kullanan birçok kitaplık olduğunu biliyorum. Çözümü javascript'te istiyorum. Lütfen yardım et. Böyle

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

şey? Bu son ürün değil, kesinlikle yol.

Bu cevap 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

dayanmaktadır Kuralların

https://jsfiddle.net/hp7po95j/

olabildiğince yakın olmaya çalıştık 0

Dilediğiniz kadar pürüzsüz hale getirmek için rakamlarla etrafta dolaşın

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

}