Question

我知道也许这个问题有很多插件，但我想自己这样做，好吧我们有3个部分，我想当你按键盘上的keydown滚动跳转到第2部分，如果再次按下滚动跳转到第3部分，如果你按下键，它会回到第2部分，如果再次按下跳转到第1部分，我需要这个用于单页网站，我想让键盘UP / Down支持。

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

你的选择器没有返回任何锚点缺失... 在使用这个小提琴时检查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元素和Next / Previous ..

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

<强> scrollToPrevious

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;
}

Answer 2

试试这个......

function scrollToAnchor(aid){
    $('html,body').animate({scrollTop: aid.offset().top},'slow');
}  
var i = 1;
$(document).keydown(function (event) {

    if (event.keyCode == 38) {
            i++;
            scrollToAnchor($("#Section"+i+""));
     } else if (event.keyCode == 40) {
            i--;
            event.preventDefault();
            scrollToAnchor($("#Section"+i+""));
        }
    });

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

2 个答案: