Sådan opretter du en knap til at returnere til toppen af siden

Sådan opretter du en "Gå til toppen"-knap

Trin 1 - Tilføj HTML:

Opret en knap, der, når den klikkes, vil føre brugeren til toppen af siden:

<button onclick="topFunction()" id="myBtn" title="Gå til toppen">Top</button>

Trin 2 - Tilføj CSS:

Indstil knoppens stil:

#myBtn {
  display: none; /* Standard er skjult */
  position: fixed; /* Fastgørelse/klæbning af position */
  bottom: 20px; /* Placer knappen 20px fra bunden af siden */
  right: 30px; /* Placer knappen 30px fra højre side af siden */
  z-index: 99; /* Sørg for, at det ikke overlapper */
  border: none; /* Fjern kant */
  outline: none; /* Fjern omrids */
  background-color: red; /* Sæt baggrundsfarve */
  color: white; /* Tekstfarve */
  cursor: pointer; /* Tilføj musepegevær ved museoverførsel */
  padding: 15px; /* Nogle indre margener */
  border-radius: 10px; /* Kugleformede kanter */
  font-size: 18px; /* Øg skriftstørrelse */
}
#myBtn:hover {
  background-color: #555; /* Tilføj mørkegrå baggrund ved museoverførsel */
}

Tredje trin - Tilføj JavaScript:

// Få fat i knappen:
let mybutton = document.getElementById("myBtn");
// Når brugeren ruller 20px ned fra dokumentets top, vis knappen
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// Når brugeren klikker på knappen, rul tilbage til dokumentets top
function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // Tilgængelig for Chrome, Firefox, IE og Opera-browsere
}

Prøv det selv