Animasyonlu Yukarı Git Butonu

Her web sayfasındaki bir klasik, basıldığında kaydırmayı en başa taşıyan “Yukarı git” veya “Yukarı” düğmesidir. Bugün sizlere, projelerinizde uygulayabileceğiniz oldukça hafif, saf JavaScript ile geliştirilen küçük bir buton paylaşmak istiyorum.

Kurulum

Web sitenizin gövdesine aşağıdaki HTML yapısını ekleyin, platforma veya projenize bağlı olarak bu adım farklı olabilir, </body> öğesinin üstüne öneririm:

<button class="toTop" id="toTop">
  <svg viewBox="0 0 24 24">
    <path d="m4 16 8-8 8 8"></path>
  </svg>
</button>

Şimdi aşağıdaki stilleri ekleyin, örneğin WordPress kullanıyorsanız bunları style.css dosyanıza ekleyin, Blogger olması durumunda Şablon Tasarımcısından CSS Ekle seçeneğini kullanın.

/* Yukarı butonu */
.toTop {
  border: none;
  display: flex;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s;
  /* posición */
  position: fixed; right: 1rem; bottom: 1rem; z-index: 9999;
}
.toTop:not(.is-visible) {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2rem);
}
.toTop svg {
  stroke-width: 3px;
  stroke: currentColor;
  fill: none;
  width: 24px;
}
/* Personalizar */
.toTop {
  background-color: #252525;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: #fff;
}

Son olarak ve her şeyi çalıştıracak olan JavaScript kodudur, web sayfanızın javascript kodunun geri kalanıyla birlikte aşağıdaki pasajı ekleyin, eğer yazacak hiçbir yeriniz yoksa, yukarıyı deneyin </body>:

<script>/*<![CDATA[*/
const toTop = (() => {
  let button = document.getElementById("toTop");
  window.onscroll = () => {
    if (document.documentElement.scrollTop > 200){
      button.classList.add("is-visible")
    } else {
      button.classList.remove("is-visible")
    }
  }
  button.onclick = () => {
    window.scrollTo({
      top:0, behavior:"smooth"
    })
  }
})();/*]]>*/
</script>

Ve bu kadar, yapacak başka bir şey yok. Kodu doğru eklediyseniz, sayfayı aşağı kaydırdığınızda “Yükle” butonunu göreceksiniz. Başarılı olmadıysanız, bir yorum bırakın ve size daha kişisel bir şekilde yardımcı olmaya çalışacağım.

Kişiselleştir

Çok fazla kod yok, bu yüzden gerekli olduğunu düşündüğünüz adımların herhangi birini düzenleyebilirsiniz, buna rağmen "görünüm" stillerini, özellikle bu kısmı ayırdım:

/* Kişiselleştir */
.toTop {
  background-color: #252525;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: #fff;
}

Bunların hepsi düğmeyi görsel olarak şekillendiren, kodu düzenlemekten veya kendi stillerinizi yazmaktan çekinmeyin ve düğmeye yeni bir görünüm kazandıran stillerdir.

Çözüm

Hepsi bu kadar, küçük bir katkı ama aynı şekilde sizin için de çok faydalı olacağını umuyorum, öyleyse bu makaleyi paylaşmayı unutmayın, büyümeme yardımcı olduğunuz için minnettarım, yoryum yazmaktan çekinmeyin.