키보드를 사용하여 사진을 스크롤하는 방법

Question

친척과 사진을 공유하는 데 사용하는 작은 사진 포트폴리오 사이트가 있습니다. 사진은 세로 스크롤링 페이지에 1000px 정도 쌓여 있습니다. 예를 들면 다음과 같습니다. http://pavelrozman.com/photo/events/jamison/. 지금은 화살표 키로 800px로 스크롤 할 수있는 작은 자바 스크립트가 있습니다. 이것은 괜찮지 만, 이미지 높이가 다양하기 때문에 일관성이 없습니다. The Verge에 대한 기사를 읽었습니다. 정확히 찾고자하지만 Javascript/jQuery에 대해 잘 모르기 때문에 구현 방법을 모릅니다. 기사는 여기 http://www.theverge.com/2013/7/29/4560214/point-and-shoot-perfection-an-evening-with-sonys-rx100m2이고 "다음 d 또는 이전 이미지의 맨 위로 스크롤하는"기능을 사용하려면 'd'및 's'사용 '을 복사하고 싶지만's '대신 화살표 키를 사용하십시오. 가능한 경우 'd'. 고맙습니다.

Answer 1

내 머리 꼭대기에서 각 이미지의 top 오프셋의 목록을 만든 다음 위/아래 화살표를 누르면 scrollTop 위치를 이미지 위치와 비교하여 위쪽/다운 방향.

var locs = []; 

// Save offsets of each image 
// Use a better selector in real life 
$('img').each(function() { 
    locs.push($(this).offset().top); 
}); 

$(document).keydown(function (e) { 

    switch (e.which) { 
     case 37: 
     case 38: 
     case 83: 
      // Get the current scroll position 
      var sTop = parseInt($(document).scrollTop()); 

      // For UP, go through the list backward until 
      // you find one before the current scroll position 
      for (i = locs.length-1; i >= 0; i--) { 
       if (locs[i] < sTop) { 
        $(document).scrollTop(locs[i]); 
        break; 
       } 
      } 
      break; 
     case 39: 
     case 40: 
     case 68: 
      // Get the current scroll position 
      var sTop = parseInt($(document).scrollTop()); 

      // For DOWN, go through the list until 
      // you find one after the current scroll position 
      for (i = 0; i < locs.length; i++) { 
       if (locs[i] > sTop + 1) { 
        $(document).scrollTop(locs[i]); 
        break; 
       } 
      } 
      break; 
     default: 
      return true; 
    } 

    return false; 
}); 

데모 : 그 직전 기사에서 볼 수있을 예정입니다 무엇 http://jsfiddle.net/9BEbh/