添加箭頭鍵導航到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(); 
     });