Herhangi bir web sayfasındaki bir klasik, basıldığında kaydırmayı başa götüren "Yukarı git" veya "Yukarı" düğmesidir. Bugün projelerinizde uygulayabileceğiniz oldukça hafif, saf JavaScript ile geliştirilen küçük bir buton paylaşmak istiyorum.
Kurulum
Aşağıdaki HTML yapısını Web sitenizin gövdesine ekleyin, </body> etiketinin üst tarafına. Platforma veya projenize bağlı olarak bu adım farklı olabilir:
<button class="toTop" id="toTop">
<svg viewBox="0 0 24 24">
<path d="m4 16 8-8 8 8"></path>
</svg>
</button>
Aşağıdaki stilleri içerir. Örneğin, WordPress kullanıyorsanız bunları style.css dosyanıza ekleyin, Blogger söz konusu olduğunda Şablon Tasarımcısının CSS Ekle seçeneğini kullanın.
/* Botón Subir */
.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, her şeyin çalışmasını sağlayacak olan JavaScript kodudur. Aşağıdaki snippet'i web sayfanızın javascript kodunun geri kalanıyla birlikte ekleyin, yazacak yeriniz yoksa </body> etiketinin üst tarafında deneyin:
<script>/*<![CDATA[*/
const toTop = (() => {
let button = document.getElementById("toTop");
window.onscroll = () => {
button.classList[
(document.documentElement.scrollTop > 200) ? "add" : "remove"
]("is-visible")
}
button.onclick = () => {
window.scrollTo({
top:0, behavior:"smooth"
})
}
})();/*]]>*/
</script>
İşte bu kadar, yapacak başka bir şey yok. Kodu doğru eklediyseniz, sayfayı aşağı kaydırdığınızda “Yükle” düğmesini göreceksiniz. Başaramadıysanız, bir yorum bırakın size daha kişisel bir şekilde yardımcı olmaya çalışacağım.
Kişiselleştir
Çok fazla kod yok, bu nedenle adımlardan herhangi birinde gerekli gördüğünüzü düzenleyebilirsiniz. Bunun için, özellikle bu kısım olmak üzere “görünüş” stillerini ayırdım:
/* 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;
}
Bunların tümü düğmeyi görsel olarak şekillendirmek için, kodu düzenlemekten veya kendi stillerinizi yazmaktan çekinmeyin ve düğmeye yeni bir görünüm verin.
Çözüm
Hepsi bu kadar. Siteniz için küçük bir katkı, umarım faydalı bulursunuz. Okuduğunuz için teşekkürler.
