jQuery - 滾動到下一個/上一部分通過KeyUp/KeyDown

Question

我知道也許有這個問題有很多插件，但我想這樣做我自己，例如，我們有3個部分，我想當你按鍵盤上的按鍵滾動跳到第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是空..

UPDATE當你按下鍵再次就跳到下一章節不僅第3節的任何解決方案

http://jsfiddle.net/63ynJ/17/

我使用Visible Plugin for JQuery和PrevAll/NextAll選擇獲取可視元素和一首/下一該元素的..

$(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+"")); 
     } 
    });