Arrowkey使用jQuery导航列表

Question

我试图通过使用箭头使我的网站滚动。因为它是一个每页的宽度和高度都是100%的网站，所以我把它安排在李的里面。注意，页面的内容里也有李的，所以我尽量限制自己只浏览李的，因为李是身体的孩子。

我可以让我的脚本使用李的硬编码的id标记来工作，但是由于我的一个页面将是一个博客，这并不是我可以避免每次更新时都要做一些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元素之外是无效的。只是因为浏览器非常容错，它才能工作。