滾動到下一個元素通過按鍵＆scrollTo插件 - jQuery

我使用jQuery的scrollTo插件上下滾動我的頁面，使用向上箭頭和向下箭頭。滾動到下一個元素通過按鍵＆scrollTo插件 - jQuery

我有一堆與類「屏幕」的div，像這樣：<div class="screen-wrapper">...</div>

我所試圖做的是，當我按下UP或DOWN，窗口滾動到下一個或前一個DIV 「屏幕」類。

我有按鍵照顧。根據插件文檔，要滾動一個窗口，可以使用$ .scrollTo（...）;

這裏是我的代碼：

$(document).keypress(function(e){ 
    switch (e.keyCode) { 
     case 40: // down 
      n = $('.screen-wrapper').next() 
      $.scrollTo(n, 800); 
      break; 
     case 38: // up 

      break; 
     case 37: // left 

      break; 
     case 39: // right 

      break; 

    }  
});

如果有幫助，這裏的HTML DIV。我有幾個，這些網頁上，而且基本上，我試圖通過按下箭頭滾動到下一個：

<div class='screen-wrapper'> 
<div class='screen'> 
    <div class="sections"> 
     <ul> 
      <li><img src="images/portfolio/sushii-1.png " /></li> 
      <li><img src="images/portfolio/sushii-2.png" /></li> 
      <li><img src="images/portfolio/sushii-3.png" /></li> 
     </ul> 
    </div> 

    <div class="next"></div> 
    <div class="prev"></div> 
</div>

並且如果它需要的話，我可以提供要將這是正在如果它使用一個鏈接會幫助別人得到更好的想法。

編輯而且，我忘了提到這裏真正的問題是什麼。問題是，它不會向下滾動過去的第一個元素，因爲提到了seth。

來源

2009-07-18 sqram

你的問題是什麼？ – 2009-07-18 04:52:37

對不起。剛剛編輯了一個真正的問題。 – sqram 2009-07-18 05:21:39

這裏沒有真正的問題，但我會猜測問題是您的頁面不會滾過第一個頁面。這是因爲你把這種對每一個按鍵：

  n = $('.screen-wrapper').next()

它可能返回同一個你怎麼稱呼它每一次。嘗試在按鍵之外移動實例化。

  var s = $('.screen'); 
      var curr=-1, node; 

      $(document).keypress(function(e){ 
      switch(e.keyCode) { 
       case 40: 
        node = s[++curr]; 
        if (node) { 
        $.scrollTo(node,800); 
        } 
        else { 
        curr = s.length-1; 
        } 
        break; 
       case 38: 
        node = s[--curr]; 
        if (node) { 
        $.scrollTo(node ,800); 
        } 
        else { 
         curr = 0; 
        } 
        break; 
       } 
      });

來源

2009-07-18 05:11:26 seth

好的。謝謝。現在就試試。 – sqram 2009-07-18 05:23:42

我剛剛實施了類似的東西，我用id屬性爲每個元素。

爲什麼不這樣做

window.location.href = '#section-' + curr;

而是採用scrollTo？

來源

2009-07-18 05:57:38

滾動到下一個元素通過按鍵＆scrollTo插件 - jQuery

回答

相關問題