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