Tenho algumas sections no site, gostaria que ao captar o scroll, o site fosse direto para a próxima/anterior sectio. Como as sections são 100vh, pego a dimensão de altura da tela do device e a cada scroll subo ou desço esse valor (de acordo com a direção do scroll)
Tenho botões de navegação que vão para as sections diretamente, estão no código como "dot".
const body = document.querySelector('.pf')
const viewHeight = Math.max(document.body.clientHeight,
window.innerHeight || 0) //validado
const dot = document.querySelectorAll('.dot')
var lastScrollTop = 0
Array.prototype.forEach.call(dot, btn => {
btn.addEventListener('click', () => {
lastScrollTop = window.pageYOffset ||
document.documentElement.scrollTop
})
})
window.addEventListener(
'scroll',
e => {
var scrollTop = window.pageYOffset ||
document.documentElement.scrollTop
if (scrollTop > lastScrollTop) {
lastScrollTop = lastScrollTop + viewHeight
} else {
lastScrollTop = lastScrollTop - viewHeight
}
window.scrollTo(0, lastScrollTop)
}
)
Esse código faz minha página subir e descer, sempre retornando ao topo (altura 0 da página), não parando nas sections como deveria.
Queria fazer esse efeito sem o uso de bibliotecas, apenas JS puro.
O que falta/está errado?