跳轉到下一個＆prev圖像（垂直滾動）與jQuery

Question

我有一個線性列表的圖像（垂直），我搜索使用鍵盤向上導航到下一個或prev圖像。 我的問題是，我不知道我在滾動的位置，以及我需要滾動到何處去轉到下一個或上一個圖像。

我看到this example但它是水平的。我試圖讓它垂直，但沒有成功...

我也試過一些事情與inView jQuery插件，沒有成功。 一些啓動：

$("body:not(.photo) #images img").each(function() { 
    $(this) 
     .css({cursor: "pointer"}) 
     .on("click", function() { 
      var $n = $(this).next(), 
       offset = ($n.length) ? $n.offset().top : 0; 

      scrollTo(offset); 
     }); 
    }); 

    // http://jsfiddle.net/JjhUN/5/ 
    var elems = []; 
    $("#images").children().each(function() { 
    elems.push(this.offsetTop); 
    }); 

    console.log(elems); 

Answer 1

我打與該水平爲例，將其更改爲垂直。 http://jsfiddle.net/6gCA6/1/

我希望這有幫助。

JS

$(function() { 
    var boxLefts = []; 
    $('.box').each(function(i, el){ 
     boxLefts.push(this.offsetTop); 
    }); 

    $(document).keydown(function(e) { 
     var dir = false, 
      targetUp = -1; 

     switch (e.keyCode) { 
     case 38: 
      dir = -1; 
      break;     
     case 40: 
      dir = 1; 
      break; 
     default: 
      break; 
     } 

     if (dir) { 
      e.preventDefault(); 
      winUp = window.scrollY; 
      $.each(boxLefts, function(i, v){ 
       if ((dir == 1 && winUp < v && targetUp < 0) || 
        (dir == -1 && winUp > v)) { 
        targetUp = v; 
       } 
      }); 
      if (targetUp >= 0) { 
       $('html, body').animate({scrollTop: targetUp}, 1000); 
      } 
     } 
    }); 
}); 

CSS

#wrapper { 
    white-space: nowrap; 
    width: 1500px; 
} 

.box { 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
    margin: 0 10px 0 0; 
    /*display: inline-block;*/ 
}