Как сделать так, чтобы ссылка переходила на следующий якорь на странице, не зная имени якоря?

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>