화살표 키 또는 버튼을 사용하여 다음/이전 앵커로 스크롤할까요?

Question

지금은 일주일 동안 인터넷 검색을 봤는데 내가 화살표를 사용하여 탐색 할 수 있도록하려면를 제외하고 난 그냥, 그것을 내가 this 유사한 수평 웹 사이트를 만들고있어 모든 :(

을 결합하는 방법을 이해하지 않습니다 키는 this 앞뒤로 비슷한 가로 페이지의 섹션 사이 이동

내가 다음 페이지 찾은 관련 연구 :.

• stackoverflow.com/questions/2168739/using-arrow-keys-with-jquery-scrollto
• 을 83,210
• stackoverflow.com/questions/1402698/binding-arrow-keys-in-js-jquery
• jqueryfordesigners.com/adding-keyboard-navigation/
• tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery

내가 가지고 올 수 있었던 가장이입니다하지만이 작동하지 :

$(document).bind('keydown',function(evt) { 
     switch(evt.keyCode) { 
     case 37: 
       evt.preventDefault(); 
       $.scrollTo('+=564px', 800, { axis:'x' }); 
        break; 
       } 
}); 


$(document).bind('keydown',function(evt) { 
     switch(evt.keyCode) { 
        case 39: 
       evt.preventDefault(); 
       $.scrollTo('-=564px', 800, { axis:'x' }); 
        break; 
       } 
}); 

이 단지 아닌가 화살표 키나 화살표 버튼을 사용하여 스크롤 할 수있는 앵커 또는 div 클래스를 만드는 방법은 무엇입니까? 나는 꽤 여기에서 길을 잃는다. 어쩌면 내가 너무 많은 부탁 해요,하지만 누군가가 올바른 방향으로 날 지점 수 있다면 감사합니다 :)

Answer 1

다음 코드 왼쪽/오른쪽 화살표 키 누름으로 감지합니다, 감사하게 될 거라고 :

$("body").keydown(function(e) { 
    if (e.which == 37) { 
     // left arrow pressed 
    } 
    else if (e.which == 39) { 
     // right arrow pressed 
    } 
}); 

을 각 조건에 대한 슬라이드 논리를 추가하기 만하면됩니다.

Answer 2

$('document').keypress(function(e) { 
    if (e.which == 38) { 
     //scroll up 
    } else if (e.which == 39) { 
     //scroll right 
    } else if (e.which == 40) { 
     //scroll down 
    } else if (e.which == 37) { 
     //scroll left 
    } 
}); 

사용 .animate()는 스크롤 효과를 수행하고 차단하는 경우 그 각 키의 기본 동작을 방지하기 위해 e.preventDefault();를 사용합니다.