使用jQuery键盘从锚点动态滚动到锚点

Question

我动态生成一个html页面，我希望能够使用箭头键上下浏览它，每次按UP时滚动到下一个锚点或关闭。

这里是我的代码（不工作）

$(document).keydown(function(e){ 
    if (e.keyCode == 40) { 
     console.log('keydown'); 
     if (next === undefined) { 
      next = $('.js_anchor').next(); 
     } else { 
      next = next.next(); 
     } 
     $(document).animate({scrollTop: next}, 2000,'easeInOutCubic'); 
    } 
}); 

任何想法？谢谢 ！

Answer 1

使用一个变量来锚列表，然后密钥索引存储到当前像这样：

$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'); 

请大家注意，它尚未经过测试，但应该是接近的工作，如果没有工作。