Javascript 连续滚动视口高度直到结束

我有这段代码，当点击一个固定按钮时，可以一节一节地滚动视口高度，直到到达终点。然后我想淡出按钮

HTML

<a class="cd-go">
        <img class="scroll-swipe" src="<?php bloginfo('template_directory'); ?>/img/scroll_down_arrow.svg">
</a><!-- scroll btn -->

问题是它只是从第一节滚动到第二节。这怎么可能是一节一节直到底部

编辑： 这里有一把小提琴：

只需放置

$（文档）.height（）

而不是

$（窗口）.height（）

：）

试试这个

$(document).on('click', '.cd-go', function(event){                        
event.preventDefault();
var viewportHeight = $(document).height();
$("html, body").animate({
     scrollTop: viewportHeight,
  }, {
    duration: 500,
    complete: function () {
       $('.cd-swipe').slideDown(300);
    }
  });
});

---

您正在滚动窗口而不是文档

您可以跟踪当前节，并将

视口高度

乘以当前节。这样你就可以一节一节地滚动

var currentSection=0；
var totalSections=document.queryselectoral（“节”）.length；
$（文档）.on（'click'，'.cd go'，函数（事件）{
event.preventDefault（）；
var viewportHeight=$（窗口）.height（）；
currentSection++；
如果（currentSection>totalSections-1）currentSection=totalSections-1；
$（'html，body'）。设置动画({
scrollTop:viewportHeight*currentSection，
完成：函数（）{
$（'cd swipe'）。向下滑动（300）；
}
}, 500);
});
.cd-go{
宽度：209px；
背景：rgba（0,0,0,0.17）；
身高：212px；
边界半径：212px；
颜色：#fff；
位置：固定；
底部：-106px；
文本对齐：居中；
左：0；
右：0；
保证金：0自动；
}
w秒{
高度：100vh；
}
.w-sec：第一种类型{
背景：#fff；
}
.w-秒：第n种类型（2）{
背景：#ccc；
}

向下
内容
内容
内容
这似乎是直接滚动到底部，而不是一节一节地滚动到底部。哦，我以为你只是想滚动到底部。这似乎是直接滚动到底部，而不是一节一节地滚动到底部。谢谢。您能否建议在用户回滚时使用一个代码段来重置这些部分？
$(document).on('click', '.cd-go', function(event){                        
event.preventDefault();
var viewportHeight = $(document).height();
$("html, body").animate({
     scrollTop: viewportHeight,
  }, {
    duration: 500,
    complete: function () {
       $('.cd-swipe').slideDown(300);
    }
  });
});