Question

我使用此代码允许使用键盘箭头滚动，问题是它顺利向下但不向上。我也希望它滚动到每个部分而不是按住箭头。这有可能吗？

$(document).keydown(function(e) {
  switch (e.which) {
    case 38: // up
      document.body.scrollTop -= 500;
      document.documentElement.scrollTop -= 500;
      break;

    case 40: // down
      document.body.scrollDown += 500;
      document.documentElement.scrollDown += 500;
      break;

    default:
      return; // exit this handler for other keys
  }
});

$(document).ready(function(){
  window.focus();
});

body{
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

要动画滚动到特定元素，您可以执行以下操作：

$('html, body').animate({
    scrollTop: $("#section-1").offset().top
}, 1e3); // 1sec

要查找当前可见的部分，您可以迭代它们并像这样检查：

var $current = null;

$('.section').each(function() {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(this).offset().top;
    var elemBottom = elemTop + $(this).height();

    if (!$current && elemBottom <= docViewBottom && elemTop >= docViewTop) {
        $current = $(this);
    }
});

然后根据按下的键，通过$.next()或$.prev()选择下一个或上一个元素，并在滚动时使用它：

$('html, body').animate({
    scrollTop: $current.next().offset().top
}, 1e3); // 1sec

这是一个工作的plunker（仍然有一些错误，只是一个概念证明）：

https://plnkr.co/edit/GMVKhskBn2mt3OXiCRo6?p=preview

使用键盘滚动到部分

1 个答案: