为网站滚动添加效果

Add effects to website scroll

本文关键字：添加 滚动 网站      更新时间：2024-06-12

我正在使用箭头键滚动网站内容。我想添加滚动时间和滚动效果。

我知道有很多库使用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>

类似的东西？这不是最终产品，但肯定是最终产品。

此答案基于另一个答案

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

我已经尽力接近您的代码

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);
}
相关文章：