将键盘控件添加到ScrollTo Post

我正在使用this scrollTo script from webdesignerwall，并尝试添加键盘控件。将键盘控件添加到ScrollTo Post

原来的脚本：

$(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')); 
    } 
});

感谢您的帮助。

来源

2011-07-23 jjj

那么你是否试图做到这一点，如果有人点击它会去下一篇文章，反之亦然？ – daryl

是的，没错。 – jjj

它应该是：

$(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，我已经离开的方向键，这样你就可以看到一些与映射的问题。）

来源

2011-07-23 09:14:34

谢谢。这听起来不错，但它不起作用 – jjj

糟糕！犯了一个菜鸟的错误，忽略了'break'。查看更新后的答案。 –

非常感谢您的帮助。现在有效。 – jjj

随着布鲁克·亚当斯的帮助，这是剧本完成：

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; 
     } 
    } 
});

来源

2011-07-23 16:13:48 jjj

将键盘控件添加到ScrollTo Post

回答

相关问题