Jquery/JS：从同级跳过N项。保留密钥后出错

Question

当我在类div中有一个div列表时。

<div class="list-group games">
   <div>item</div>
    <div>item</div>
    <div>item</div>
    <div>item</div>
    <div class="active">item</div>
    <div>item</div>
    <div>item</div>
</div>

这是一个包含700个项目的很长的列表，我想使用page down/up按钮和上下移动1个项目的箭头键轻松导航。

它们的功能是移动单个项目，工作正常。pgdown/up功能在按下它时也可以工作，其间有一个小停顿。当我按住pgdown/up按钮时，它在执行该函数约10次后开始给我以下错误。

我使用的函数

function pgDown(e){
                e.preventDefault();
                var currentItem = $(".active");
                var itemCount = $(".games").children().length;
                nextItem = currentItem.prevAll().size() - 10;
                if (nextItem < itemCount){
                    currentItem.removeClass('active');
                    currentItem = $(".games div:nth-child("+ nextItem +")").addClass('active');
                    animatedScrollTo(
                        document.body,
                        ($(".active").offset().top) - ($(window).height()/2), 
                        0
                    );
                }
            }

错误：

Uncaught TypeError: Cannot read property 'top' of undefined

它来自函数中的一行代码

($(".active").offset().top) - ($(window).height()/2), 

有人知道如何防止这种情况发生吗？

如果有实现这一目标的另一种方法，那么我很乐意实施它。

Answer 1

似乎在某个点上，没有包含“active”类的元素，或者它是隐藏的。你应该调查一下。但是，这样可以防止发生错误：

var activeOffset = $(".active").offset();

if(activeOffset) {
    animatedScrollTo(
      document.body,
      (activeOffset.top) - ($(window).height()/2), 
      0
   ); 
}