Jak utworzyć przycisk powrotu do góry strony

Jak utworzyć przycisk przewijania do góry

Krok 1 - Dodaj HTML:

Utwórz przycisk, który po kliknięciu przeniesie użytkownika do góry strony:

<button onclick="topFunction()" id="myBtn" title="Do góry">Do góry</button>

Krok 2 - Dodaj CSS:

Ustaw styl przycisku:

#myBtn {
  display: none; /* Domyślnie ukryty */
  position: fixed; /* Stałe/lepkie umieszczenie */
  bottom: 20px; /* Umieść przycisk na dole strony */
  right: 30px; /* Umieść przycisk w odległości 30px od prawej strony strony */
  z-index: 99; /* Upewnij się, że nie jest nadrukowany */
  border: none; /* Usuń obramowanie */
  outline: none; /* Usuń kontur */
  background-color: red; /* Ustaw kolor tła */
  color: white; /* Kolor tekstu */
  cursor: pointer; /* Dodaj wskaźnik myszy przy najechaniu */
  padding: 15px; /* Nieco wewnętrznego marginesu */
  border-radius: 10px; /* Krawędzie zaokrąglone */
  font-size: 18px; /* Zwiększ rozmiar czcionki */
}
#myBtn:hover {
  background-color: #555; /* Dodaj ciemnoszary tło przy najechaniu myszą */
}

Krok 3 - Dodaj JavaScript:

// Uzyskaj przycisk:
let mybutton = document.getElementById("myBtn");
// Kiedy użytkownik przewija w dół od góry dokumentu 20px, wyświetl przycisk
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// Kiedy użytkownik kliknie przycisk, przewiń do góry dokumentu
function topFunction() {
  document.body.scrollTop = 0; // Dla Safari
  document.documentElement.scrollTop = 0; // Przystosowane do przeglądarek Chrome, Firefox, IE i Opera
}

Spróbuj sam