jQuery使用下一个/上一个按钮滚动到下一个Div类 [英] jQuery Scroll to Next Div Class with Next / Previous Button

问题描述

我想要的是固定导航，使用NEXT和PREV按钮基本上将页面滚动到下一个具有section类的div。

What I'd like is for the fixed navigation, with NEXT and PREV buttons to basically scroll the page to the next div with the class of "section".

我已经设置了jQuery，实际上是为NEXT和PREV hrefs添加了一个click函数。然后，这个单击函数将使用ScrollTop移动到下一个带有.section类的duv。

I've setup jQuery to essentially add a click function to the NEXT and PREV hrefs. This click function will then use ScrollTop to move to the next duv with a class of .section.

这是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/

I am currently working on JSfiddle with heavily commented jQuery to help you digest: http://jsfiddle.net/ADsKH/1/

我有一个console.log当前正在检查（.next（））以确定下一个.section将会是什么，但它给了我一些非常奇怪的结果。

I have a console.log currently checking for (that.next()) to determine what the next .section will be, but it's giving me back some very weird results.

为什么这不能按预期工作？

Why this isn't working as intended?

推荐答案

你的 找不到 .next（'。section'）因为它嵌套在 .navigation 中。

Your that can't find a .next('.section') because it's nested inside .navigation.

来自 .next（）的jQuery文档。

From the jQuery documentation for .next().

获取匹配元素集中每个元素的紧随其后的兄弟。

Get the immediately following sibling of each element in the set of matched elements.

这是一个基于您的代码的工作示例

这篇关于jQuery使用下一个/上一个按钮滚动到下一个Div类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！