使用jQuery通过列表导航箭头键

Question

我正在尝试通过使用arrowkeys来滚动我的网站。由于这是一个每页都覆盖100％宽度和高度的网站，我已将它安排在li中。请注意，页面内容中也有li，所以我试图将自己限制为只导航身体的孩子li。

我可以使用硬编码的id-tag为我的脚本工作，但由于我的一个页面将成为一个博客，这不是一个真正的选择，我可以消除不得不做一点html每次我更新这个。

有人能弄明白我的剧本有什么问题吗？以下是我到目前为止的内容+一个重新解决我的问题的方法。

var count = $("body li").length;
var position = 0;
var moveToElement = function() {

var elementTop = $(count[position]).offset().top;

$("html:not(:animated),body:not(:animated)").delay( 0 ).animate({ scrollTop: elementTop-20}, 400 );
    }

    $(document).keydown(function(e) {
        switch (e.which) {
            case 38:
                // Go up
                if(position > 0)
                    position--;
                break;
            case 40:
                // Go down
                if(position < count.length - 1)
                    position++;
                break;
            default:

                return;
        }

        moveToElement();
    });

http://jsfiddle.net/jNc68/2/

Answer 1

http://jsfiddle.net/jNc68/5/

您获得的是集合的长度而不是项目列表。应该是：

var count = $("body li");

不是

var count = $("body li").length;

正在使用$(count[position])

进行索引

由于“count”已经是一个JQuery集合，你可以用它代替它：

var elementTop = count.eq(position).offset().top;

由于count是JQuery对象的误导性变量名，建议您将其更改为$elements（$前缀是JQuery对象的一个​​命名标准）：

http://jsfiddle.net/jNc68/6/

*请注意：LI或UL元素之外的UL不是有效的HTML。这只是因为浏览器具有很强的容错能力。