jQuery每次单击都转到下一节

1hdlvixo  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(167)

我试图实现的是一个单一的按钮在一个固定的位置,在每一次点击它会带我到下一节的网页(一节与类“下一节”在我的情况下)
我从这段代码开始:

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);
});

但这只适用于一次点击-一次我需要它带我到下一节在每一次点击按钮将不胜感激的答案谢谢
这里有一把小提琴https://jsfiddle.net/hamergil/jv3ja3wp/12/

lpwwtiir

lpwwtiir1#

你需要像下面这样修改代码
1.使用counter变量,并在滚动代码之前在单击处理程序中增加它。
2.在click处理程序中使用.next()获取滚动的正确元素位置。

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/

相关问题