Javascript .next（）jQuery仅滚动一次

最好只是签出并尝试单击按钮

我遇到的问题是，第一个按钮使用jQuery

.next（）

函数导航到下一节。然而，它并不适用于其他情况

var buttons= document.querySelectorAll(".next-section");

for(var i=0; i<buttons.length; i++){
    buttons[i].addEventListener("click", scrollDown);
}   

function scrollDown(){
    console.log("Debug: BUTTON CLICKED")
    $('html, body').animate({
        scrollTop: $("section").next(".page").offset().top 
    }, 'slow');
}

var buttons=document.querySelectorAll（“.next section”）；
对于（var i=0；i您的事件附件工作，并且调用了
scrollDown
方法

但是，
$（“节”）。下一页（.page）
始终返回第二页，并始终尝试将该页滚动到第二节

发生了什么：

$（“节”）
返回页面（第1、2、3、4页）的所有
section
元素
.next（“.page”）
返回每个元素的下一页（第2、3、4页）
.offset（）.top
返回列表中第一个元素的顶部位置（第2页）
相反，您需要获取当前页面的下一页，该页
$（this）.最近（“.page”）
，并获取其偏移量。

您可以改为使用以下代码：

$('html, body').animate({
    scrollTop: $(this).closest(".page").next().offset().top 
}, 'slow');

以下是工作演示：


var buttons=document.querySelectorAll（“.next section”）；
对于（变量i=0；i

html，
身体{
文本对齐：居中；
保证金：0；
}
.第页{
高度：100vh；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.内容{
显示：块；
高度：自动；
}
#一个{
背景颜色：灰色；
}
#两个{
背景色：红色；
}
#三{
背景颜色：蓝色；
}

第1页
这是第一页

下一页！
第2页
下一页
第3页
下一页
第4页
下一页