类之间的键盘导航答案

【问题标题】：Keyboard navigation between classes类之间的键盘导航
【发布时间】：2014-05-26 17:15:58
【问题描述】：

我需要一些帮助：'(

我尝试在我的页面上的每个<article class="layout"></article> 标签之间添加一个键盘导航。

按键盘上的“向上”和“向下”键查看运行中的代码： http://jsfiddle.net/5LJRh/2/

我尝试在我的页面上操作此代码，但没有成功，请问有什么问题吗？ http://jsfiddle.net/LPvS9/2/

function scroll(direction) {

    var scroll, i,
        positions = [],
        here = $(window).scrollTop(),
        collection = $('.layout'); // ANYTHING WITH A CLASS OF layout ( class ="layout" ) becomes a 'stop point' for your navigation.

    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) {
        switch (event.keyCode) {
        case 38: // key is up
            scroll('prev');
            break;
        case 40: // key is down
            scroll('next');
            break;
        }
});

【问题讨论】：

始终在问题中包含相关代码in，不要只链接。链接失效了，人们不应该离开网站来帮助你。
好的，但这取决于我的页面结构。我更新了我的帖子。
以及相关的标记。再说一遍：链接失效了，人们不应该离开网站来帮助你。
@T.J.Crowder 对不起

标签： jquery navigation keyboard

【解决方案1】：

这只是一个简单的例子，给你一个想法。fiddle
我已删除您的一些可能存在冲突的外部资源
我添加了一个脚本来移动这些部分

<script type="text/javascript">
$(document).ready(function(){
  var  positions = []
  $('#content article').each(function(){
       positions.push(parseInt($(this).offset().top));
    })
    console.log(positions)
    var count=-1
    var x=positions.length-1    
    $(window).keydown(function (event) {
        switch (event.keyCode) {
        case 38:
            if(count>=x*(-1)&&count!==0){   
                count--
                console.log(count)
                $('body,html').stop().animate({ scrollTop:positions[count]},2000 )
                }else{event.preventDefault()}

            break;

        case 40:
            if(count<=x){
                count++
                console.log(count)
                $('body,html').stop().animate({ scrollTop:positions[count]},2000 )
                }else{event.preventDefault()}

            break;
        }
     });        

})
</script>

要做的工作还很多。
这只是一个简单的例子，希望对你有所帮助。

【讨论】：