jQuery - 通过 KeyUp/KeyDown 滚动到下一个/上一个部分

Question

我知道这个问题可能有很多插件，但我想自己做这个，例如我们有 3 个部分，我想当你按下键盘上的 keydown 时滚动跳转到第 2 部分，如果你再次按下滚动跳转到第 3 部分，如果您按向上键，它会返回到第 2 部分，如果再次按则跳转到第 1 部分。我需要这个用于一页网站，并且我想让它支持键盘向上/向下。

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}  

$(document).keydown(function (event) {
        if (event.keyCode == 38) {
            event.preventDefault();
            $('.Sections').scrollToAnchor().next();
        } else if (event.keyCode == 40) {
            event.preventDefault();
            $('.Sections').scrollToAnchor().prev();
        }
    });

这是一个 jsFiddle ，我知道有些代码完全错误，所以请忽略它并向我解释我该怎么做。

Answer 1

您的选择器没有返回任何内容，因为缺少 anchor ...使用此 fiddle 期间检查console.log:http://jsfiddle.net/jFIT/63ynJ/15/

function scrollToAnchor(aid){
 console.log(aid);
 var aTag = $("#"+ aid);
 console.log(aTag);
 console.log(aTag.offset());

 $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}  

控制台中也出现错误，表示无法读取未定义的顶部..因为aTag为空..

更新 当您再次按下键时，它会跳转到下一部分，而不仅仅是第 3 部分。任何解决方案

<强> http://jsfiddle.net/63ynJ/17/

我正在使用 Visible Plugin for JQuery 和 PrevAll/NextAll 选择器来获取 Visible 元素以及该元素的下一个/上一个元素..

$(document).keydown(function (event) {
 console.log(event.keyCode);
 if (event.keyCode == 38) {
    event.preventDefault();
    scrollToPrevious();
 } else if (event.keyCode == 40) {
    event.preventDefault();
    scrollToNext();
 }
});

滚动到上一页

function scrollToPrevious() {
   var prevElement = getCurrentlyVisibleSection().prevAll('section');
   if (prevElement.length > 0) scrollToElement(prevElement);
}

获取当前可见部分

function getCurrentlyVisibleSection() {
    $("#Section1").visible(true);
    var rtn;
    $.each($('section'), function (ind, val) {
        if ($(this).visible(false)) {
            //true here means ALL the element has to be visible.. change to False if you want ANY Part of the item to be visible.. 
            rtn = $(this);
        }
    });
    return rtn;
}