Jquery 向下翻页单击滚动div fit以查看端口

我有四个div，它们都适合查看端口。我想在page down（向下）按钮单击（键代码：34）上滚动下一个div适合查看端口。现在我做了鼠标滚动。我想通过page down/up（向下/向上）键来修改它。Dy默认div one在page down（向下）键的顶部，div 2在查看端口上，反之亦然，在page up（向上）键的顶部

//将每个部分的高度设置为窗口高度
$（'.clildClass'）.height（$（window.height（））；
/*将类“active”设置为第一个元素
这将作为我们的指标*/
$（'.clildClass'）.first（）.addClass（'active'）；
/*与一起处理鼠标滚轮事件
DOMMouseScroll在跨浏览器上工作*/
$（文档）.on（'mousewheel-DOMMouseScroll'，函数（e）{
e、 preventDefault（）；//防止默认鼠标滚轮滚动
var active=$（'.active'）；
//获取增量以确定鼠标滚轮上下滚动
var delta=e.originalEvent.detail<0 | | e.originalEvent.wheeldta>0？1:-1；
//如果增量值为负值，则用户正在向下滚动
if（δ<0）{
//滑鼠轮下处理器
下一步=活动。下一步（）；
//检查下一节是否存在并设置锚定动画
如果（下一个长度）{
/*setTimeout用于防止滚动动画
跳到最上面或最下面
用户滚动得很快*/
var timer=setTimeout（函数（）{
/*通过传递为scrollTop设置动画
元素会偏移最大值*/
$（'body，html'）。设置动画({
scrollTop:next.offset（）.top
}“慢”）；
//将指示器移动到“活动”级别
next.addClass（'active'）
.sides（）.removeClass（'active'）；
清除超时（计时器）；
}, 800);
}
}否则{
//鼠标滚轮式上提装置
/*类似于鼠标滚轮向下处理程序的逻辑
除了我们正在制作锚定动画
到上一个同级元素*/
prev=active.prev（）；
if（上一个长度）{
var timer=setTimeout（函数（）{
$（'body，html'）。设置动画({
scrollTop:prev.offset（）.top
}“慢”）；
上一个addClass（'active'）
.sides（）.removeClass（'active'）；
清除超时（计时器）；
}, 800);
}
}
});
.clildClass{
最小高度：100vh；
}

第一组
第二组
第三组
第四组
尝试以下操作：

//Set each section's height equals to the window height
$('.clildClass').height($(window).height());
/*set the class 'active' to the first element 
 this will serve as our indicator*/
$('.clildClass').first().addClass('active');

$(window).on('keydown', function(e) {//use the keydown event
 var active = $('.active');
  e.preventDefault(); //prevent the default mousewheel scrolling

console.log(2)
  if (e.keyCode == 40) {//test if the key is the down arrow

    next = active.next();
    //check if the next section exist and animate the anchoring
    if (next.length) {
      /*setTimeout is here to prevent the scrolling animation
       to jump to the topmost or bottom when 
       the user scrolled very fast.*/
      var timer = setTimeout(function() {
        /* animate the scrollTop by passing 
        the elements offset top value */
        $('body, html').animate({
          scrollTop: next.offset().top
        }, 'slow');

        // move the indicator 'active' class
        next.addClass('active')
          .siblings().removeClass('active');

        clearTimeout(timer);
      }, 800);
    }

  } else if (e.keyCode == 38) {//test if the key is the up arrow
    prev = active.prev();

    if (prev.length) {
      var timer = setTimeout(function() {
        $('body, html').animate({
          scrollTop: prev.offset().top
        }, 'slow');

        prev.addClass('active')
          .siblings().removeClass('active');

        clearTimeout(timer);
      }, 800);
    }

  }
});

演示：
您按下“提问”按钮的原因是？我没有看到任何按键事件，您的代码不完整，请发布我为鼠标滚动所做的所有代码。您可以将取消按键事件所在的行粘贴到哪里吗？