キーボードコントロールをスクロールポストに追加

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キーNと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; 
     } 
    } 
});