İçeriğe geç

JavaScript ile Back-to-Top Buton Yapımı

Uzun web sayfalarında, sayfa sonuna gelindiğinde tekrar yukarı çıkmak oldukça sıkıcı ve yorucu bir durum teşkil ediyor.

Hal böyle olunca; sayfanıza gelen ziyaretçileri bile kaçırabilirsiniz.

Uzun bir web sayfanız varsa ve sayfanın aşağılarına doğru inildikçe, tekrar yukarı çıkması için bir buton belirlemek isteyebilirsiniz. O halde bu yazı sizin için geliyor..!

Öncelikli olarak; CSS ile bir buton yapalım. Benim CSS butonum aşağıdaki gibidir.

.back-to-top-button {
    display          : none;
    position         : fixed;
    color            : #FFF;
    background-color : #000;
    padding          : 20px;
    bottom           : 0px;
    right            : 0px;
    border           : none;
    text-decoration  : none; 
    z-index          : 1000;
}

CSS class’ımın adını back-to-top-button olarak belirledim.

Yazdığım stil satırlarında, display : none olarak belirlememin nedeni; sayfa açıldığında bu butonun ekranda gözükmesinin istemememden dolayıdır. Düşünsenize; sayfa açıldı bamm! O da ne? Kullanıcının, sayfanın aşağısından yukarı çıkmasını istediğimiz buton çıktı karşımıza! Ne kadar kötü bir görüntü. O yüzden sayfa sıfır konumundayken yani ilk açılışında bu butonun gözükmemesi gerekiyor. Bir diğer nokta da text-decoration: none size garip gelebilir. Bu satırı da class’ı <a> elementinde kullanacağım içindir.

Oluşturduğumuz bu CSS class’ını elementimize ekleyelim.

<a href="#!" class="back-to-top-button">UP</a>

Burada elemente; icon da ekleyebilirsiniz. Ben örnek olması açısından UP yazdım.

Şimdi sırada JavaScript kodlarımız var. En önemli kısmı da zaten JavaScript kodlarını yazmaktır.

Mantığımız şu şekilde olmalı; kullanıcı sayfaya girdi, kaydırma çubuğunu aşağı indirdi sayfanın en başına çıkmak için hazırladığımız buton belirecek. Bu butona tıkladığı zaman sayfa sıfır konumuna gelecek ve buton yeniden gizlenecek.

JavaScript kodlarımız aşağıdaki gibi olacaktır. Daha sonrasında da açıklamalarımızı yapalım.

var triggerPosition = 50;
var backToTopButton = document.querySelector('.back-to-top-button');

window.addEventListener('scroll', function() {
    if (window.scrollY > triggerPosition) {
        backToTopButton.style.display = 'block';
        backToTopButton.addEventListener('click', function() {
            window.scroll({
                top: 0, 
                left: 0, 
                behavior: 'smooth' 
            });
        });
    } else {
        backToTopButton.style.display = 'none';
    }
});

Kodlarımızı test etmek için CodePen’e ekledim.

See the Pen js-scroll-to-top by Emre Can OZTAS (@emrecanoztas) on CodePen.0

Şimdi yazdığımız JavaScript kodlarımızı açıklayalım.

Aslında JavaScript kodlarımız çok basit. Zaten ben kodlarımızı oldukça basit tuttum ve çok sade olmasını istedim. Kodlarımızı eminim hemen anlamışsınızdır fakat ben yine açıklama getireyim.

Yaptığımız şey şu şekilde; triggerPosition olarak belirlediğimiz değişkenimizde butonumuzun, hangi pozisyonda belireceğini belirtiyoruz. Buradaki 50 değeri piksel cinsinden. Yani kaydırma çubuğu 50 pikselden aşağıya kaydığı zaman butonumuz belirecek. Yani; 0 – 50 arasında butonumuz gizlenecek.

Şayet kaydırma çubuğu 50 pikselden aşağı indiyse; o zaman butonumuz için yazdığımız listener, click işlemini dinlemeye başlayacak. Buton tıklandığı zaman sayfanın en başına geri döneceğiz. behavior alanında belirttiğimiz smooth ise yavaş bir şekilde yukarı çıkılmasını sağlıyor. Eğer auto derseniz; hemen sizi sayfanın en başına götürür.

Her şey bu kadar basit..!

Bu kodları kendi projenize dahil etmek isterseniz; yukarıda paylaşmış olduğum CodePen sayfasından veya buradaki Github hesabımdan ulaşabilirsiniz.

Şuan 2019’a girmeye 1 saat 3 dakika var. Yılın bu son yazısı inşAllah yararlı olmuştur. 2019’da görüşmek üzere!

Saygı ve muhabbetle!..

Bu içeriği paylaşmak ister misiniz?

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Buradaki içeriklerin tümü kamu malıdır. Kullanılması ve paylaşılması özgürdür.