添加箭头键导航到jQuery的scrollTop

Question

我使用jQuery的scrollTop浏览页面上的点。很棒。但我想知道是否可以将上/下箭头键导航添加到它。例如，向下箭头滚动到下一个点，下一个点等。向上箭头返回一个点，等等，对这个任何帮助非常感谢！

HTML：

<a class="bookmark" href="#option1">Option 1</a> 
<a class="bookmark" href="#option2">Option 2</a> 
<a class="bookmark" href="#option3">Option 3</a> 

<div id="option1">Stuff</div> 
<div id="option2">Stuff</div> 
<div id="option3">Stuff</div> 

jQuery的

$('.bookmark').click(function() { 
    var elementClicked = $(this).attr("href"); 
    var destination = $(elementClicked).offset().top; 
     $("html:not(:animated),body:not(:animated)") 
      .delay(300).animate({ scrollTop: destination-20}, 700); 
    return false; 
}); 

Answer 1

不完全的回答你的问题，但jscrollpane有此内置功能，如果你想使用该尝试。

在初始化中，您只需输入{showArrows：true; } 并做了。

Answer 2

像这样的东西应该是你要找的东西。

在移动用户滚动鼠标之前，可以轻松添加一些决定您所在页面的哪一部分！

var navPoints = [ 
      '#option1', 
      '#option2', 
      '#option3', 
      '#option4', 
      '#option5' 
     ]; 

     var currentPoint = 0; 

     var moveToElement = function() { 
      var elementTop = $(navPoints[currentPoint]).offset().top; 
      $("html:not(:animated),body:not(:animated)").delay(300).animate({ scrollTop: elementTop-20}, 700); 
     } 

     $(document).keyup(function(e) { 
      switch (e.which) { 
       case 38: 
        // Up Arrow 
        if(currentPoint > 0) 
         currentPoint--; 
        break; 
       case 40: 
        // Down Arrow 
        if(currentPoint < navPoints.length - 1) 
         currentPoint++; 
        break; 
       default: 
        // Some other key 
        return; 
      } 

      moveToElement(); 
     });