Question

我需要一些帮助：'（

我尝试在每个<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;
        }
});

Answer 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>

要完成的工作仍然很多这只是一个简单的例子，我希望它可以帮到你。

类之间的键盘导航

1 个答案: