Introductie
Wanneer je een website hebt die gebruikers vraagt om lang naar beneden te scrollen, is het een leuk gebaar om een knop aan te bieden om terug naar boven te scrollen!
In deze praktische handleiding leren we hoe je een geanimeerde HTML/CSS/JS-knop maakt om naar boven te scrollen in Vanilla JavaScript.
Opmerking: De broncode en live preview is beschikbaar op CodePen.
Ermee beginnen
We zullen de functionaliteit helemaal opnieuw creëren en stylen. Met behulp van een querySelector()
, zullen we de gemaakte knop selecteren en de zichtbaarheid in- en uitschakelen op basis van waar de gebruiker zich op de pagina bevindt, en een gebeurtenis activeren om bij elke klik naar boven te scrollen.
Als je wilt lezen over het maken van een scroll-naar-top in React, lees dan onze Naar boven scrollen in Reageren met een knopcomponent!
Omdat de knop is vastgezet op een bepaalde locatie (rechtsonder) met behulp van de CSS position
attributen, kan de opmaak voor deze functionaliteit overal in de body
element van uw HTML-code:
<div className="scroll-to-top"> <span class="btn btn-position btn-style">^</i>
</div>
Eenmaal toegevoegd, kunnen we de knop en zijn bovenliggende stijl opmaken <div>
. We zullen de positie van de knop rechtsonder aanpassen, een beetje verschuivend van de onderkant en de rechterkant:
.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;
}
We hebben de visibility
van deze knop om hidden
standaard, zodat de knop alleen verschijnt wanneer de gebruiker naar een bepaalde positie (Y-as) heeft gescrolld - we doen dit door de eigenschap later met JavaScript te wijzigen. Laten we tot slot een . toevoegen zweven en wat animatie aan de knop zodat hij niet stilstaat:
.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); }
}
De logica implementeren
Nu de knop gestileerd en onzichtbaar is, gaan we de logica implementeren die hem zichtbaar maakt zodra de gebruiker naar beneden scrolt. We selecteren het via querySelector()
en bevestig een EventListener
naar het element:
const scrollBtn = document.querySelector(".btn");
Nu, gebaseerd op de positie van de Y-waarde van het venster (hoeveel de gebruiker verticaal heeft gescrolld, beginnend bij .) 0
) – we zetten de visibility
van het element om "visible"
or "hidden"
als de Y-waarde onder een bepaalde drempel ligt:
const btnVisibility = () => { if (window.scrollY > 400) { scrollBtn.style.visibility = "visible"; } else { scrollBtn.style.visibility = "hidden"; }
};
Nu hebben we een functie die, wanneer aangeroepen, controleert of de webpagina naar beneden is gescrolld naar 400
, en zet de visibility
van het knopelement naar visible
, anders wordt het ingesteld op hidden
.
Ten slotte willen we deze functie herhaaldelijk oproepen om de positie herhaaldelijk te controleren en de zichtbaarheid dienovereenkomstig aan te passen. Dit kan het beste via een gebeurtenis luisteraar die de functie bij elke scrollende wijziging activeert:
document.addEventListener("scroll", () => { btnVisibility();
});
Het laatste stukje code dat we aan een gebeurtenislistener willen koppelen, is de logica om de gebruiker programmatisch terug te scrollen wanneer hij op een knop klikt. De scrollToTop()
functie van de window
instantie doet precies dat! We kunnen instellen wat de "top" is, door een Y-coördinaat op te geven, en de methode op elk aanroepen "click"
evenement op de knop:
scrollBtn.addEventListener("click", () => { window.scrollTo({ top: 0, behavior: "smooth" });
});
Opmerking: window.scrollTo()
heeft een gedragsparameter die aangeeft of het scrollen zacht (soepel) of onmiddellijk in een enkele stap moet verlopen (auto
de standaardwaarde).
Dat is het! Probeer naar beneden te scrollen op de pagina - er verschijnt een geanimeerde knop. Zodra dit het geval is en u erop klikt, wordt u vlot teruggebracht naar de bovenkant van de pagina:
Conclusie
Naar de bovenkant van de pagina scrollen is niet moeilijk - zelfs niet met gebeurtenisluisteraars en animaties! In deze praktische handleiding hebben we geleerd hoe we de scroll-to-top-functionaliteit kunnen implementeren met Vanilla JavaScript en hebben we de knop gestyled.