jquery 上下翻滚

jQuery是一个流行的JavaScript库，它可以让网站变得更加动态和交互性。在这篇文章中，我们将介绍如何使用jQuery实现上下翻滚的效果。

$(document).ready(function(){
  // 监听键盘事件
  $(document).keydown(function(e){
    // 判断按下的键是否是上下箭头
    if(e.keyCode == 38 || e.keyCode == 40){
      // 阻止页面默认的滚动事件
      e.preventDefault();
      
      // 获取当前页面的高度和滚动距离
      var windowHeight = $(window).height();
      var scrollTop = $(window).scrollTop();
      
      // 判断用户按的是上箭头还是下箭头
      if(e.keyCode == 38){
        // 上箭头，滚动到上一页
        $('html, body').animate({
          scrollTop: scrollTop - windowHeight
        }, 500);
      }else{
        // 下箭头，滚动到下一页
        $('html, body').animate({
          scrollTop: scrollTop + windowHeight
        }, 500);
      }
    }
  });
});

以上代码中，我们首先监听键盘事件，如果按下的键是上下箭头，则阻止页面默认的滚动事件。接着，我们获取当前页面的高度和滚动距离，根据用户按下的箭头按钮，通过jQuery的animate()方法，实现页面的上下滚动。

需要注意的是，上述代码只是实现了基本的上下翻滚效果，如果有需要，我们可以根据自己的需求，添加更多自定义的动画效果，比如淡入淡出等。