单击向上或向下滚动100vh纯javascript

我试图实现一个简单的按钮，点击将滚动页面上或下100vh之间我的部分。我可以看到很多使用jQuery的例子，但我正在寻找一个纯javascript解决方案。我不知道如何实现它

谢谢你的建议

HTML

这就是我到目前为止的想法

for (var s = 0; s < btn.length; s++) {
    btn[s].addEventListener('click', function(){
        window.scrollBy(0,1000);
    });
}

for（var s=0；s

有。使用其中一种方法，您应该能够使用视口大小代替

1000

，按原样滚动

例如，如果我想使用

window.innerHeight

精确滚动一个视口的高度：

let pageHeight = window.innerHeight;
window.scrollBy(0, pageHeight);

有。使用其中一种方法，您应该能够使用视口大小代替

1000

，按原样滚动

例如，如果我想使用

window.innerHeight

精确滚动一个视口的高度：

let pageHeight = window.innerHeight;
window.scrollBy(0, pageHeight);

document.querySelectorAll（'.btn'）.forEach（btn=>{
btn.addEventListener（'click'，function（）{
让scrollDistance=document.documentElement.clientHeight；
if（btn.className.split（“”）.includes（'scroll-up'））{
滚动距离*=-1；
}
scrollBy（0，scrollDistance）；
});
});
正文{
保证金：0；
}
.科{
宽度：100%；
高度：100vh；
}
.第1节{
背景颜色：蓝色；
}
.第2节{
背景色：红色；
}
.第3节{
背景颜色：绿色；
}

v
^
v
^
v
^

document.querySelectorAll（'.btn'）.forEach（btn=>{
btn.addEventListener（'click'，function（）{
让scrollDistance=document.documentElement.clientHeight；
if（btn.className.split（“”）.includes（'scroll-up'））{
滚动距离*=-1；
}
scrollBy（0，scrollDistance）；
});
});
正文{
保证金：0；
}
.科{
宽度：100%；
高度：100vh；
}
.第1节{
背景颜色：蓝色；
}
.第2节{
背景色：红色；
}
.第3节{
背景颜色：绿色；
}

v
^
v
^
v
^

let pageHeight = window.innerHeight;
window.scrollBy(0, pageHeight);