jQuery - Scroll To Next/Prev Section by KeyUp/KeyDown

Question

I know maybe there are many plugin for this question but i want to do this myself, well for example we have 3 sections, i want when you press keydown on keyboard scroll jump to section 2, if you press again scroll jump to section 3, and if you press key up, it back to section 2 and if press again jump to section 1. i need this for a one page website and i want to make it keyboard UP/Down support.

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

here is a jsFiddle , i know some code totally wrong, so please ignore it and explain to me how can i do this.

Answer 1

Your selector is returning nothing as anchor missing... Check console.log during using this fiddle : 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');
}  

There was also an error in console saying that it couldnt read top of undefined.. because aTag was null..

UPDATE when you press down key again it jump to next section not only section 3. any solution

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

I am using Visible Plugin for JQuery and PrevAll/NextAll selectors to get Visible element and Next/Previous of that element..

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

Get currently visible section

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

Try this...

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