jQuery Прокрутите страницу до следующей/предыдущей секции

Question

много вопросов об этом - но решения, на которые я смотрел, не работают для моего использования.

Мне нужна функция jQuery, чтобы страница прокручивалась до следующего «раздела» на моем веб-сайте, но мои кнопки next/prev расположены глобально над разделами, поэтому использование таких подходов, как переход к следующему родителю, не работает, также не «находит следующий раздел», поскольку иерархия вложенности неправильна из-за того, что кнопки со стрелками являются внешними по отношению к самим разделам ...

Код должен работать независимо от количества разделов - и не требуется жестко закодированная секция классы/идентификаторы ....

Любые идеи?

Пример кода ниже:

<div class="arrows"> 
<a href="#" class="arrow-up prev-section"></a> 
<a href="#" class="arrow-down next-section"></a> 
</div> 

<section class="panelSection"> 
... section content here ... 
</section> 

<section class="panelSection"> 
... 2nd section content here ... 
</section> 

Answer 1

попробовать это:

var sections = $('.panelSection'); 
console.log(sections); 
var i =0; 
var scrolto = 0; 

function next(){ 

    if(i == 0){ 
     $('.prev-section').show(); 
    } 
    if(i < sections.length -1){ 
     i++; 
     if(i == sections.length -1){ 
      $('.next-section').hide(); 
     } 
     $('html, body').animate({ 
      scrollTop: sections[i].offsetTop 
     }, 2000); 
    }else{ 
     alert('end reached'); 
    } 
} 
function prev(){ 
    if(i == sections.length -1){ 
     $('.next-section').show(); 
    } 
    if(i > 0){ 
     i--; 
     if(i == 0){ 
      $('.prev-section').hide(); 
     } 
     $('html, body').animate({ 
      scrollTop: sections[i].offsetTop 
     }, 2000); 
    }  
} 
$('html').keydown(function(e){ 
    if(e.which == '38'){ 
     prev();  
    } 
    if(e.which == '40'){ 
     next();  
    } 
}); 
$('.next-section').click(function(e){ 
    e.preventDefault(); 
    next(); 
}); 

$('.prev-section').click(function(e){ 
    e.preventDefault(); 
    prev(); 
});  

хранить секции в массиве и перебрать этот массив на щелчки, то вы прокрутите список до верхней смещения. сделал скрипку так скрывает кнопки и проверяет мин-макс количество секций, также включены вверх вниз ключ стрелки поддержки

скрипку: http://jsfiddle.net/yn6maby0/25/