Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Refatoração de código

Galera, estou criando um código para um botão "back to top" em JavaScript só que eu quero fazer o botão funcionar apenas para uma seção!

Eu consegui fazer o botão aparecer com na altura que eu quero em relação ao scroll do usuário e sumir quando voltar a uma altura inferior a que eu quero. Entretanto, o código está com 3 if's e gostaria de saber se eu consigo refatorá-lo para fazer com que os 2 if's que são condicionais (um quando o usuário está em uma distancia superior altura definida e um para quando ele volta a uma distância inferior a altura definida) Segue o código abaixo comentando as funcionalidades

//Botão que defini para o "Back To Top"
const botaoVoltar = document.querySelector(".botao-voltar");
//A classe CSS 
const visible = "botao-visible";

//Duas variáveis para pegar o elemento de referência da altura mínimo e altura máxima em que o botão deve aparecer
let variedadesTitulo = document.querySelector(".variedades__titulo");
let atracoesSection = document.querySelector(".atracoes");

//Evento de escutar o scroll do usuário chamando a função que faz o botão aparecer e sumir
window.addEventListener('scroll', scrollToVariedades);

function scrollToVariedades(event){

    //esse event ta aqui de enfeite por enquanto rsrsrs 
    event.preventDefault();

    //Distancia do elemento 1 até o topo
    const toTopVariedades = variedadesTitulo.offsetTop;

    //Distância do elemento 2 até o topo
   const toTopAtracoes = atracoesSection.offsetTop - 85;

    //Onde o botão deve aparecer
    if(window.pageYOffset > toTopVariedades){
        botaoVoltar.classList.add(visible);
    }

    //Onde o botão deve sumir
    if(window.pageYOffset >= toTopAtracoes){
        botaoVoltar.classList.remove(visible);
    }

    //Desfaz a primeira aparição do botão! Aqui que eu quero corrigir, quero q após o usuário voltar a uma distancia < toTopVariedades o botão suma novamente
    if(window.pageYOffset < toTopVariedades){
        botaoVoltar.classList.remove(visible);
    }
};

//Uma frase motivacional qualquer que leio quando fico puto aksdka :D
//Se funcionou, busque entender o porquê

Se puderem me ajudar agradeceria muito <3

2 respostas
solução!

Ja tentou usando o operador "||" ??

Exemplo:

//Botão que defini para o "Back To Top"
const botaoVoltar = document.querySelector(".botao-voltar");
//A classe CSS 
const visible = "botao-visible";

//Duas variáveis para pegar o elemento de referência da altura mínimo e altura máxima em que o botão deve aparecer
let variedadesTitulo = document.querySelector(".variedades__titulo");
let atracoesSection = document.querySelector(".atracoes");

//Evento de escutar o scroll do usuário chamando a função que faz o botão aparecer e sumir
window.addEventListener('scroll', scrollToVariedades);

function scrollToVariedades(event){

    //esse event ta aqui de enfeite por enquanto rsrsrs 
    event.preventDefault();

    //Distancia do elemento 1 até o topo
    const toTopVariedades = variedadesTitulo.offsetTop;

    //Distância do elemento 2 até o topo
   const toTopAtracoes = atracoesSection.offsetTop - 85;

    //Onde o botão deve aparecer
    if(window.pageYOffset > toTopVariedades){
        botaoVoltar.classList.add(visible);
    }

    //Onde o botão deve sumir
    if(window.pageYOffset >= toTopAtracoes || window.pageYOffset < toTopVariedades ){
        botaoVoltar.classList.remove(visible);
    }

};

Usei o operador no ultimo if, veja se era isso sua duvida, e desculpe caso eu tenha entendido errado!

Fala boy bom dia!

Perfeito! Eu realmente não tentei colocar o operador OU no segundo if, só no primeiro aksdkakdkask É exatamente esse comportamento que eu queria e ainda me deu liberdade de colocar outra função que tenho pra smooth scroll sem atrapalhar a performace :D

Muito obrigado