위쪽 및 아래쪽 화살표 누름을 사용하여 특정 애노 커 태그로 이동

Question

현재 앵커 태그를 사용 중이며 5 개의 링크에서 부드러운 스크롤을 구현했습니다. 이것은 현재 완벽하게 작동합니다. 그러나 화살표 키를 사용하여 동일한 앵커 태그를 탐색 할 수있는 기능을 추가하고 싶습니다.

나는 자바 스크립트와 jquery를 통해서만 어색해 할 수있다. 그래서 나는 그 물건에 관해서는 꽤 혼란 스럽다.

<ul> 
    <li class="scrolldot"><span><a href="#one">1</a></span></li> 
    <li class="scrolldot"><span><a href="#two">2</a></span></li> 
    <li class="scrolldot"><span><a href="#three">3</a></span></li> 
    <li class="scrolldot"><span><a href="#four">4</a></span></li> 
    <li class="scrolldot"><span><a href="#five">5</a></span></li> 
    <li class="scrolldot"><span><a href="#six">6</a></span></li> 
</ul> 

기본적으로 나는 사용자가 페이지에서의 위치에 따라 아래쪽 화살표를 누르고 다음 섹션으로 이동하기를 원합니다. 그들이 섹션 2에 있다면, 3으로 가져 가라. 그들이 다시 치면 다시 2 명으로 돌아갈 것입니다. 이해가 되니?

Answer 1

체크 아웃 Mousetrap. 바인딩 키를 아주 쉽게 만들어주는 멋진 라이브러리입니다. 이 사이트에는 몇 가지 좋은 예가 있습니다.

아마도 이런 일이 충분 :

Mousetrap.bind('up', function() { 
    your_up_function(); 
}); 

Mousetrap.bind('down', function() { 
    your_down_function(); 
});