Hoe een knop om naar de bovenkant van de pagina terug te keren te maken

Hoe een knop om naar boven te scrollen te maken

Eerste stap - HTML toevoegen:

Maak een knop aan die de gebruiker naar de bovenkant van de pagina brengt:

<button onclick="topFunction()" id="myBtn" title="Naar boven">Top</button>

Tweede stap - CSS toevoegen:

Stel de stijl van de knop in:

#myBtn {
  display: none; /* Standaard is het verborgen */
  position: fixed; /* Vastzetten/Plakken van positie */
  bottom: 20px; /* Plaats de knop 20px van de onderkant van de pagina af */
  right: 30px; /* Plaats de knop 30px van de rechterkant van de pagina af */
  z-index: 99; /* Zorg ervoor dat het niet overlapt */
  border: none; /* Verwijder de rand */
  outline: none; /* Verwijder de rand */
  background-color: red; /* Stel de achtergrondkleur in */
  color: white; /* Tekstkleur */
  cursor: pointer; /* Voeg een muisaanwijzer toe bij muisovergang */
  padding: 15px; /* Enkele inspringing */
  border-radius: 10px; /* Rondingen */
  font-size: 18px; /* Verhoog de lettergrootte */
}
#myBtn:hover {
  background-color: #555; /* Voeg een donkergrijze achtergrond toe bij muisovergang */
}

Derde stap - Voeg JavaScript toe:

// Haal de knop op:
let mybutton = document.getElementById("myBtn");
// Wanneer de gebruiker 20px van de top van het document naar beneden scrolt, wordt de knop weergegeven
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// Wanneer de gebruiker op de knop klikt, scrollt het naar de top van het document
function topFunction() {
  document.body.scrollTop = 0; // Voor Safari
  document.documentElement.scrollTop = 0; // Geschikt voor Chrome, Firefox, IE en Opera browsers
}

Probeer het zelf