Zephyrnet-logo

Scroll naar boven in Vanilla JavaScript

Datum:


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:

scroll naar boven in vanille javascript

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.

spot_img

Laatste intelligentie

spot_img