Introduzione

Ogni volta che hai un sito Web che richiede agli utenti di scorrere un lungo importo, offrire un pulsante per tornare in alto è un bel gesto!

In questa guida pratica, impareremo come creare un pulsante HTML/CSS/JS animato per scorrere verso l'alto in Vanilla JavaScript.

Iniziamo

Creeremo la funzionalità da zero e la modelleremo. Usare un querySelector(), selezioneremo il pulsante creato e ne attiveremo e disattiveremo la visibilità in base alla posizione dell'utente nella pagina e attiveremo un evento per scorrere verso l'alto ad ogni clic.

Se desideri leggere come creare uno scorrimento verso l'alto in React, leggi il nostro Come scorrere verso l'alto in risposta a un componente pulsante!

Perché il pulsante è fissato in una determinata posizione (in basso a destra) utilizzando il CSS position attributi, il markup per questa funzionalità può essere inserito ovunque all'interno del file body elemento del tuo codice HTML:

<div className="scroll-to-top"> <span class="btn btn-position btn-style">^</i>
</div>

Una volta aggiunti, possiamo dare uno stile al pulsante e al suo genitore <div>. Fisseremo la posizione del pulsante in basso a destra, spostandolo leggermente dal basso e dal lato destro:

.scroll-to-top { position: relative;
} .btn-position { position: fixed; bottom: 40px; right: 25px; z-index: 20;
} .btn-style { background-color: #551b54; border: 2px solid #fff; border-radius: 50%; height: 50px; width: 50px; color: #fff; cursor: pointer; animation: movebtn 3s ease-in-out infinite; transition: all 0.5s ease-in-out; font-size: 40px; display: flex; justify-content: center; align-items: center; visibility: hidden;
}

Abbiamo impostato il file visibility di questo pulsante a hidden per impostazione predefinita, in modo che il pulsante appaia solo quando l'utente è passato a una posizione particolare (asse Y) – lo faremo alterando la sua proprietà con JavaScript in un secondo momento. Infine, aggiungiamo a librarsi e alcune animazioni al pulsante in modo che non si fermi:

.icon-style:hover { animation: none; background: #fff; color: #551b54; border: 2px solid #551b54;
} @keyframes movebtn { 0% { transform: translateY(0px); } 25% { transform: translateY(20px); } 50% { transform: translateY(0px); } 75% { transform: translateY(-20px); } 100% { transform: translateY(0px); }
}

Implementazione della logica

Ora che il pulsante ha uno stile e invisibile, implementiamo la logica che lo rende visibile una volta che l'utente scorre verso il basso. Lo selezioneremo tramite querySelector() e allegare un EventListener all'elemento:

const scrollBtn = document.querySelector(".btn");

Ora, in base alla posizione del valore Y della finestra (quanto l'utente ha fatto scorrere verticalmente, a partire da 0) – imposteremo il visibility dell'elemento a "visible" or "hidden" se il valore Y è al di sotto di una certa soglia:

const btnVisibility = () => { if (window.scrollY > 400) { scrollBtn.style.visibility = "visible"; } else { scrollBtn.style.visibility = "hidden"; }
};

Ora abbiamo una funzione che, una volta chiamata, controlla se la pagina web è stata fatta scorrere verso il basso 400, e imposta il visibility dell'elemento pulsante a visible, altrimenti lo imposta su hidden.

Infine, vorremo chiamare ripetutamente questa funzione per controllare ripetutamente la posizione e regolare la visibilità di conseguenza. Questo è meglio farlo attraverso un ascoltatore di eventi che attiva la funzione ad ogni modifica dello scorrimento:

document.addEventListener("scroll", () => { btnVisibility();
});

L'ultimo pezzo di codice che vorremo allegare a un listener di eventi è la logica per eseguire il backup dell'utente a livello di codice quando fa clic su un pulsante. Il scrollToTop() funzione del window l'istanza fa proprio questo! Possiamo impostare qual è il "top", fornendo una coordinata Y, e possiamo chiamare il metodo su ciascuno "click" evento sul pulsante:

scrollBtn.addEventListener("click", () => { window.scrollTo({ top: 0, behavior: "smooth" });
});

Questo è tutto! Prova a scorrere la pagina verso il basso: apparirà un pulsante animato. Una volta fatto e fai clic su di esso, verrai riportato senza problemi nella parte superiore della pagina:

Conclusione

Scorrere fino all'inizio della pagina non è difficile, anche con ascoltatori di eventi e animazioni! In questa guida pratica, abbiamo imparato come implementare la funzionalità di scorrimento verso l'alto con Vanilla JavaScript e abbiamo applicato uno stile al pulsante.

• Coinsmart. Il miglior scambio di bitcoin e criptovalute d'Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. ACCESSO LIBERO.
• Criptofalco. Radar Altcoin. Prova gratuita.
• Fonte: https://stackabuse.com/scroll-to-top-in-vanilla-javascript/