Üstüne git butonunu nasıl oluşturulur: Sayfa üstüne dönen düğme

Üstüna git butonunu nasıl oluşturacağınız

İlk adım - HTML ekleyin：

Bir düğme oluşturun, bu düğmeye tıkladığınızda kullanıcı sayfa üstüne gelecek:

<button onclick="topFunction()" id="myBtn" title="Üstüna git">Üst</button>

İkinci adım - CSS ekleyin：

Butonun stilini ayarlar:

#myBtn {
  display: none; /* Default olarak gizlidir */
  position: fixed; /* Sabit/viskoz konumlandırma */
  bottom: 20px; /* Sayfanın altına 20px uzaklıkla yerleştirir */
  right: 30px; /* Sayfanın sağ kenarına 30px uzaklıkla yerleştirir */
  z-index: 99; /* Onun üstüne gitmesini sağlar */
  border: none; /* Kenar çizgisi kaldırır */
  outline: none; /* Çizgi kaldırır */
  background-color: red; /* Arka plan rengi ayarlar */
  color: white; /* Metin rengi */
  cursor: pointer; /* Fare ile üzerindeyken farenin işaretçisini ekler */
  padding: 15px; /* Biraz iç boşluk */
  border-radius: 10px; /* Kenar yuvarlakları */
  font-size: 18px; /* Yazı boyutunu artırır */
}
#myBtn:hover {
  background-color: #555; /* Fare ile üzerindeyken koyu gri arka plan ekler */
}

Üçüncü adım - JavaScript ekleyin:

// Butonu alır:
let mybutton = document.getElementById("myBtn");
// Kullanıcı belge üstünden 20px aşağıya kaydığında, butonu gösterir
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// Kullanıcı butona tıkladığında, belge üstüne kaydırılır
function topFunction() {
  document.body.scrollTop = 0; // Safari için
  document.documentElement.scrollTop = 0; // Uygun Chrome, Firefox, IE ve Opera tarayıcıları için
}

Kişisel olarak deneyin