將鍵盤控件添加到ScrollTo Post

Question

我正在使用this scrollTo script from webdesignerwall，並嘗試添加鍵盤控件。

原來的腳本：

$(function() { 
    function scroll(direction) { 
     var scroll, i, positions = [], 
      here = $(window).scrollTop(), 
      collection = $('.post'); 

     collection.each(function() { 
      positions.push(parseInt($(this).offset()['top'], 10)); 
     }); 
     for (i = 0; i < positions.length; i++) { 
      if (direction == 'next' && positions[i] > here) { 
       scroll = collection.get(i); 
       break; 
      } 
      if (direction == 'prev' && i > 0 && positions[i] >= here) { 
       scroll = collection.get(i - 1); 
       break; 
      } 
     } 
     if (scroll) { 
      $.scrollTo(scroll, { 
       duration: 750 
      }); 
     } 
     return false; 
    } 
    $("#next,#prev").click(function() { 
     return scroll($(this).attr('id')); 
    }); 
}); 

而且對於鍵盤控制我嘗試添加這樣的事情：

$(window).keypress(function(event) { 
    switch (event.keyCode) { 
     case 38: // key is up 
      return scroll($(this).attr('id')); 
     case 40: // key is down 
      return scroll($(this).attr('id')); 
    } 
}); 

感謝您的幫助。

Answer 1

它應該是：

$(window).keydown (function(event) { 
    if (event.altKey) { 
     switch (event.which) { 
      case 78: // Alt-N = next 
      case 110: // Alt-n = next 
       scroll ('next'); 
       break; 
      case 80: // Alt-P = prev 
      case 112: // Alt-p = prev 
       scroll ('prev'); 
       break; 
     } 
    } 
}) 

See it in action at jsFiddle.（在結果的任意位置單擊窗格中激活鍵盤控制）

注意：不要覆蓋常見的UI按鍵，像箭，對於這樣的事情！它會對鍵盤用戶造成嚴重破壞（如果使用文本框，則會對所有用戶造成嚴重破壞）。而且，在這種情況下，無論如何它都會導致「跳躍」行爲。

我已經重新映射功能，以Alt鍵ñ和Alt鍵P。
（在演示的jsfiddle，我已經離開的方向鍵，這樣你就可以看到一些與映射的問題。）

Answer 2

隨着布魯克·亞當斯的幫助，這是劇本完成：

function scroll(direction) { 

    var scroll, i, 
      positions = [], 
      here = $(window).scrollTop(), 
      collection = $('.post'); 

    collection.each(function() { 
     positions.push(parseInt($(this).offset()['top'],10)); 
    }); 

    for(i = 0; i < positions.length; i++) { 
     if (direction == 'next' && positions[i] > here) { 
scroll = collection.get(i); 
break; 
} 
     if (direction == 'prev' && i > 0 && positions[i] >= here) { 
scroll = collection.get(i-1); 
break; 
} 
    } 

    if (scroll) { 
     $.scrollTo(scroll, { 
      duration: 700  
     }); 
    } 

    return false; 
} 


$(function() { 
    $("#next,#prev").click(function() {   
     return scroll($(this).attr('id'));  
    }); 
}); 


$(window).keydown (function(event) { 
    if (event.altKey) { 
     switch (event.which) { 
      case 78: // Alt-N = next 
      case 110: // Alt-n = next 
       scroll ('next'); 
       break; 
      case 80: // Alt-P = prev 
      case 112: // Alt-p = prev 
       scroll ('prev'); 
       break; 
     } 
    } 
    else { 
     switch (event.keyCode) { 
      case 37: // key is left 
     case 38: // key is up 
       scroll ('prev'); 
       break; 
      case 39: // key is right 
     case 40: // key is down 
       scroll ('next'); 
       break; 
     } 
    } 
});