変数を使用してアンカーリストを保存し、次に次のように現在のキーインデックスを保存します。
$myAnchors = $('.js_anchor');
currentAnchor = -1;
$(document).keydown(function(e){
if (e.keyCode == 40) {
console.log('keydown');
if ($myAnchors.length < currentAnchor+1) {
currentAnchor++;
$(window).animate({scrollTop: $myAnchors.eq(currentAnchor).offset().top}, 2000,'easeInOutCubic');
}
}
});
これは、ユーザーが自分でスクロールして下矢印を押すと、上にスクロールする可能性があるため、いくつかの悪影響があります...この関数を使用して、スクロール先を決定します。
function getAnchorOffset(prevnext){
//prevnext = 'next' or 'prev' to decide which we want.
currentPosition = $(window).scrollTop();
for(k in $myAnchors){
if($myAnchors[k].offset().top<currentPosition && $myAnchors[k].offset().top>closestOffset){
closestOffset = $myAnchors[k].offset().top;
key = k;
}else if($myAnchors[k].offset().top>currentPosition){
break;
}
}
if(prevnext=='next'){
return $myAnchors[key+1].offset().top;
}else{
return closestOffset;
}
}
そして交換してください
$(window).animate({scrollTop: $myAnchors.eq(currentAnchor).offset().top}, 2000,'easeInOutCubic');
に
$(window).animate({scrollTop: getAnchorOffset('next')}, 2000,'easeInOutCubic');
テストされていませんが、まだ機能していない場合は、ほぼ機能しているはずです。