jQuery 每次点击都转到下一部分

Question

我想要实现的是一个固定位置的按钮，每次点击它都会带我到页面的下一部分（在我的例子中有 class "next-section" 的部分）

我从这段代码开始：

var $a = $('.down-btn'), $targets = $('div.next-section').next();
$a.on('click', function(e) {
    e.preventDefault(); 
    console.log($targets);
    var i = $a.index(this);
    var offset = $targets.eq(++i).offset().top;
    $('html, body').stop().animate({ scrollTop: offset }, 400);
});

但这只适用于一次点击 - 一次我需要它在每次单击按钮时将我带到下一部分将不胜感激谢谢

这是一个fiddle https://jsfiddle.net/hamergil/jv3ja3wp/12/

Answer 1

您需要像下面这样更改代码

1.Use counter 变量并在滚动代码之前在点击处理程序中增加它。

2.Use .next() 在 click 处理程序中以获得正确的滚动元素位置。

var i = 0;
$('.down-btn').on('click', function(e) {
  e.preventDefault();
  i++;
  var offset = $("div.next-section").eq(i).offset().top;
  $('html, body').stop().animate({
    scrollTop: offset
  }, 400);
});

工作片段：- https://jsfiddle.net/uj91djeL/1/

jQuery 每次点击都转到下一部分

jQuery go to the next section on every click

jquery

next

smooth-scrolling