Scroll go straight to the next session of the page - vanilla JS

1

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?

    
asked by anonymous 09.10.2018 / 16:47

0 answers