jQuery的滚动到下一页股利类具有下一个/上一个按钮(jQuery Scroll to Next

2019-07-20 16:33发布

我想是固定的导航,下一步和上一个按钮,页面滚动基本上与类别“一节”的下一格。

我设置了jQuery本质上添加一个单击功能next和prev的HREF。 此点击功能,那么将使用scrollTop的移动到下一个DUV一类.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/

我有一个的console.log目前检查(that.next()),以确定下一个.section伪会是什么,但它给我回了一些非常奇怪的结果。

为什么这是不工作的打算?

Answer 1:

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

从jQuery文档.next()

获取紧接在后面的各元素的同级集合中匹配的元素。

下面是根据你的代码的工作示例



文章来源: jQuery Scroll to Next Div Class with Next / Previous Button