1

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?

4
  • O problema é no click ou no scroll?
    – Sam
    Commented 9/10/2018 às 16:25
  • o problema é no scroll
    – cmoutella
    Commented 9/10/2018 às 16:27
  • Só para esclarecer um pouquinho mais: ao abrir a página vc está na primeira section, ok? Ao fazer um pequeno scroll pra baixo vc quer passar pra segunda section e assim sucessivamente? E ao subir o scroll ir pra section anterior tb?
    – Sam
    Commented 9/10/2018 às 16:33
  • Exatamente isso que eu gostaria
    – cmoutella
    Commented 9/10/2018 às 16:45

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .