С помощью JS, как создать ключ доступа, чтобы перейти к «следующей секции» на странице?

Question

У меня есть страница с несколькими разделами, и каждый раздел начинается с тега H2. Каждая секция имеет разную длину друг от друга. Я хотел бы иметь два ключа доступа: P и N, для «предыдущего» и «следующего».

Предположим, пользователь просматривает эту страницу и прокручивает ее до середины страницы и просматривает раздел 5. Если они попадают в ключ доступа P, чтобы перейти к предыдущему разделу, браузер должен перевести их на H2 заголовок раздела 4. Если они нажмут N, чтобы перейти к следующему разделу, то они должны перейти к заголовку H2 в разделе 6.

Возможно ли это сделать, без необходимости создавать отдельный ключ доступа для каждого раздела ? (Например, «1» для раздела 1, «2» для раздела 2 и т. Д.)

Answer 1

Нет, вам не нужно делать отдельные ключи - вам нужен только указатель на то, где был пользователь, и массив всех ваши разделы ... Предположим, что каждый раздел начинается с H2 здесь код, который будет делать то, что вы хотите:

<script> 

    var sections = new Array(); 



    $(document).ready(function(){ 
    //get an array of all your sections 
    sections = $("h2"); 
    //your pointer to a current section 
    index= 0; 
$(document).keydown(function(event) { 
//previous 'p' 
    if (event.keyCode == '80') { 

    if (index!=0) { 
    index--; 
    } else { 
    //wrap navigation (go tot the last item if on first item) 
    index = sections.length-1; 
    } 

    jump(sections[index]); 
    event.preventDefault(); 

    } 
    //next 'n' 
    if (event.keyCode == '78') { 
if (index<sections.length-1) { 
    index++; 
    } else { 
    //wrap navigation (go the the first item if on last item) 
    index = 0; 
    } 

    jump(sections[index]); 
    event.preventDefault(); 
    } 
    }) 
}) 

function jump(obj){ 
    var new_position = $(obj).offset(); 
    window.scrollTo(new_position.left,new_position.top); 

} 
</script> 

Answer 2

Вам нужно создать массив из offsetTop для каждого согласующего h2.

Когда пользователь нажимает «P» или «N», вам нужно проверить текущую позицию прокрутки в окне и найти, где это находится на участках.

Отсюда захватите предыдущую/следующую позицию и изменить scrollTop окна с помощью scrollTo() ...

Было бы честно занять больше времени, чтобы написать это, и если вы используете библиотеку (JQuery, dojo и т. д.) облегчили бы его.