jquery - 如何在不知道锚名称的情况下使链接转到页面上的下一个锚？

Question

我在页面顶部有一个按钮，我想对其进行编码以继续下一个锚点，无论它是什么。其实我会想做下一个/上一个按钮去下一个和上一个锚点。此按钮位于静态框架上，因此理想情况下它应该滚动页面的其余部分。

任何建议都会很棒。同样，我不知道锚是什么，这更像是使用通用按钮的章节导航。

似乎在 dom 中找到下一个锚对象并去那里应该是可行的，但我不是 jquery 或 javascript 的专家。

Answer 1

var index = -1;

$('.next').click(function() {
   index++;
   $(window).scrollTop($('a').eq(index).position().top);

});
$('.previous').click(function() {
   index--;
   if(index < 0) { index = 0;}

   $(window).scrollTop($('a').eq(index).position().top);
});

Answer 2

一个好的解决方案是使用一个类设置“当前”锚点（也许用 class='current' 硬编码页面上的第一个锚点），然后使用 jquery 遍历 dom 并选择下一个或上一个锚点。假设您有“下一个”和“上一个”按钮，您可以执行以下操作：

<script type="text/javascript">

  $('.next').click(function(e){
    e.preventDefault();
    var current_anchor = $('a.current');
    var next_anchor = current.next('a');
    $('body').animate({scrollTop:next_anchor.offset().top});
  })

  $('.previous').click(function(e){
    e.preventDefault();
    var current_anchor = $('a.current');
    var previous_anchor = current.prev('a');
    $('body').animate({scrollTop:previous_anchor.offset().top});
  })

</script>