I have some sections in the site, I would like that when capturing the scroll, the site went straight to the next / previous section. As sections are 100vh, I get the height dimension of the device screen and each scroll up or down this value (according to the scroll direction)
I have navigation buttons that go to the sections directly, they are in the code as "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)
}
)
This code makes my page go up and down, always returning to the top (page height 0), not stopping in the sections as it should.
I wanted to do this without the use of libraries, pure JS only.
What's missing / wrong?