jQuery使用下一個/上一個按鈕滾動到下一個Div類

Question

我想要的是固定導航，使用NEXT和PREV按鈕基本上將頁面滾動到下一個具有“section”類的div。

我已經設置了jQuery，實際上是為NEXT和PREV hrefs添加了一個click函數。 然后，此單擊函數將使用ScrollTop移動到具有.section類的下一個duv。

這是jQuery：

$('div.section').first();
// binds a click event-handler to a elements whose class='display'
$('a.display').on('click', function(e) {
    // prevents the default action of the link
    e.preventDefault();
    // assigns the text of the clicked-link to a variable for comparison purposes
    var t = $(this).text(),
      that = $(this);
      console.log(that.next())    
      // checks if it was the 'next' link, and ensures there's a div to show after the currently-shown one
      if (t === 'next' && that.next('div.section').length > 0) {
      //Scroll Function
      $('html, body').animate({scrollTop:that.next('div.section').scrollTop()});
  } 
    // exactly the same as above, but checking that it's the 'prev' link
    else if (t === 'prev' && that.prev('div.section').length > 0) {
      //Scroll Function
       $('html, body').animate({scrollTop:that.prev('div.section').scrollTop()});     
  }
});

我目前正在研究JSfiddle，其中包含大量評論的jQuery，以幫助您消化： http ： //jsfiddle.net/ADsKH/1/

我有一個console.log當前檢查（that.next（））以確定下一個.section將是什么，但它給了我一些非常奇怪的結果。

為什么這不按預期工作？

Answer 1

你that找不到.next('.section')因為它是嵌套.navigation 。

來自.next()的jQuery文檔。

獲取匹配元素集中每個元素的緊隨其后的兄弟。

這是一個基於您的代碼的工作示例