CSS ve jQuery ile Başa Dön Butonu Oluşturma

Oksana Semenchuk

7 sene önce

Başa Dön Butonu, çoğunuzun muhtemelen birçok web sitesinde gördüğü bir şeydir. Kaydırma başladığınızda, bir web sayfasının sağ alt köşesinde görünen ok işareti. Tıklandığında, sayfanın başına geri dönersiniz.

Hala bir web sitesi tasarlakren veya kendi başınıza bir web sitesi nasıl oluşturacağınızı merak ederken başa dön butonu eklemek istiyorsanız, aramıza hoş geldiniz!

Başa Dönüş

Kodumuz CSS stili ve jQuery betiği, iki bölümünden oluşacaktır. CSS ile başlayalım.

Buton CSS Stilleri

Düğmemiz için stil ve işareteleri oluşturmakla başlayacağiz. İşte HTML kısmı:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<a id="button"></a>

Düğme, bir id butonuna sahip tek bir bağlantı etiketinden oluşacaktır. Düğme için bir simge kullanabilmemiz için FontAwesome kütüphanesine de bir link ekliyoruz.

Butonun başlangıç stili şöyle görünür:

#button {
  display: inline-block;
  background-color: #FF9800;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  margin: 30px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s;
  z-index: 1000;1
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}

Düğme bir bağlantı elemanı olduğu için ekran özelliğini satır içi bloğa dönüştürmemiz gerekiyor. 4px yuvarlak köşeli 50 * 50 piksel kare bir düğme yapalım. Her bir tarafta parlak turuncu renk ve 30 piksellik bir kenarlık ekleriz. Sabit konum, sayfayı kaydırırken düğmemiz her zaman aynı noktada kalmasını sağlar.Çok yüksek sayısının z-endeksi ise, web sitesi öğelerinin üst üste gelmesini sağlar.

İmleci düğmenin üzerine getirdiğimizde imleç bir işaretleyicine dönüşür ve arka plan rengi koyu gri rengine değişir. Geçişleri sorunsuz hale getirmek için 0.3 saniye geçişleri atarız. Ayrıca, düğmeyi tıkladığımızda arka plan rengi de değişir.

Simge ekleme

Şimdi düğmemiz boş, bu yüzden ona bir simge ekleyelim. Bunun gibi bir sözde elemandan sonra bir :: ekleyerek yaparız:

#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

FonAwesome en popüler font kütüphanesinden bir simge seçeceğiz. Chevron Up simgesi seçmeye karar verdik. Bir sözde öğede görüntülemek için font-ailesini FontAwesome olarak ayarlayın ve simgenizin Unicode değerinin içerik özelliğine atayın. Ayrıca, satır yüksekliğinizin simge yüksekliğine eşit olması gerektiğini unutmayın.

JQuery ile İşlev Ekleme

Bu alt bölümde düğmenin nasıl çalışacağını göstereceğiz. Bunu yapmanın en kolay yolu, jQuery JavaScript kitaplığı kullanmaktır. İlk olarak, kodumuzun HTML biçimlendirmesine jQuery eklemeliyiz. Kapanış gövde etiketinden hemen önce bu kod satırını ekleyin.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

Şimdi jQuery sözdizimini kullanarak scriptimizi yazabiliriz. Jquery satırından sonra aşağıdaki komut dosyasını ekleyin:

 jQuery(document).ready(function() {
  
   var btn = $('#button');

   $(window).scroll(function() {
     if ($(window).scrollTop() > 300) {
       btn.addClass('show');
     } else {
       btn.removeClass('show');
     }
   });

   btn.on('click', function(e) {
     e.preventDefault();
     $('html, body').animate({scrollTop:0}, '300');
   });

 });

 </script>
 Bu betiği daha yakından inceleyelim. 
 İlk başta aşağıdaki kod satırını göreceksiniz : 
 jQuery(document).ready(function() {

Bu betiği daha yakından inceleyelim.

İlk başta aşağıdaki kod satırını göreceksiniz:

jQuery(document).ready(function() {

Bu işlev içindeki kodu sadece belge tam olarak yüklendiğinde çalıştırın. Bu, JavaScript kodunuzun bir web sayfasının tarayıcıda tam olarak yüklenmemiş bölümlerinde değişiklik yapmak istemesi durumunda hataları önlemenin harika bir yoludur. Belge tamamen yüklendikten sonra çalıştırdığımız kod, iki ana kod parçasından oluşur. Komut dosyasının ilk kısmı, sayfanın ilerlemesi belirli bir noktaya ulaştıktan sonra düğmemizi görünür hale getirir ve kaybolur. İkinci kısmı, düğmeyi tıkladıktan sonra sayfayı yukarı kaydırır. Her birini ayrıntılı olarak inceleyelim.

Butonun görünmesi ve kaybolması

İşi gören kodu :

  var btn = $('#button');

   $(window).scroll(function() {
     if ($(window).scrollTop() > 300) {
       btn.addClass('show');
     } else {
       btn.removeClass('show');
     }
   });

Öncelikle değişken btn bildiririz ve bir ID butonuna sahip bir öğeye yönlendiririz. Bu, JavaScript'in hesaplama yapmayı daha hızlı hale getirmesine yardımcı olur. Öğeyi bir değişkende sakladığımız zaman ve JavaScript'in kodumuzda tekrar kullanmamız gerektiğinde, onu tüm sayfanın üzerinden arama yapması gerekmez.

.scroll()

jQuery kullanışlı bir işleve sahiptir. scroll(). Ne işe yarar? Web sayfanızdaki bir scroll olayı gerçekleştiği her defasında yürütülecek bir kod parçasını bağlar. Ayarlanmış kaydırıma özelliğe sahip olan çerçeveler ve öğeler gibi herhangi bir kaydırabilir öğeye uygulayabilirsiniz. Genellikle bunu pencere öğesine uygularız, çünkü örneğimiz dahil olmak üzere çoğu durumda kaydırma işlemi gerçekleşir.

 $(window).scroll(function() {

Fonksiyonun içinde if / else ifadesini ekleriz::

     if ($(window).scrollTop() > 300) {
       btn.addClass('show');
     } else {
       btn.removeClass('show');
     }

Burada yaptığımız şey, kaydırma çubuğunun dikey konumu kontrol etmek ve belirli bir noktadan düğmemizin görünmesini sağlamaktır. Kaydrıma çubuğunun geçerli konumunu elde etmek için yerleşik bir jQuery yöntemi .scrollTop () kullanacağiz. Her kaydırma yaptığımızda, kaç pilselin gizlendiği kontrol eder ve bunları bir sayıyla karşılaştırır. Bizim örneğimizde bu sayıyı 300 olarak ayarladım, ama istediğiniz sayıya değiştirebilirsiniz. Sayı 300'den fazla olursa, düğme öğemize bir sınıf gösterisi ekleriz. Sayı 300'den daha düşük olursa ise, o sınıfı kaldırırız. Sınıf ekleme ve çıkarma imkanı, jQuery'nin bu kadar popüler olmasının bir başka nedenidir. Bunu addClass () ve removeClass () iki basit yöntemle yapabilirsiniz. Ancak henüz CSS’de sınıf gösterisi yok, o yüzden onu ekleyelim:

 if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }

Düğmemiz varsayılan olarak gizlenir, bu yüzden #buttonelement'e birkaç tane daha kural eklememiz gerekecek:

  #buton { 
  geçiş: arka plan rengi .3s, 
  opaklık .5s, görünürlük .5s; 
  opaklık: 0; 
  görünürlük: gizli; 
  } 1

Geçişi pürüzsüz hale getirebilmesi için geçiş niteliğine ve saydamlığa 0.5 saniyeye ayarlanmış iki yeni değer ekledik.

Sayfasının üstüne gidin

Komut dosyasının ikinci kısmı, düğmeyi tıkladıktan sonra sayfanın en üstüne gitmenizi sağlar.

  btn.on('click', function(e) { 
  e.preventDefault(); 
  $('html, body').animate({scrollTop:0}, '300'); 
    });1

on () Burada gördüğümüz ilk jQuery yöntemi. İlk parametrisi, tarayıcımızda bir fare tıklaması yaptığımızda her zaman gerçekleşen JavaScript "tıklama" olayıdır. İkinci parametre bir işleyici işlevidir. Bunu istediğimiz şekilde isimlendirebiliriz, ancak genelikle e veya olay ismi tercih edilir. Fonksiyonuna artarmak ve preventDefault () yöntemi kullanmak için olay parametresine ihtiyacımız var. E.preventDefault () yöntemi, olayın gerçekleşmesini engeller. Örneğin, bir bağlanto bizi bir sonraki sayfaya götürmez. Bizim durumumuzda, bağlantı elemanımız href özelliği içermemesi ve bizi yeni bir sayfaya getirmemesi nedeniyle, bu çok önemli değil, ancak iki kez kontrol etmek daha iyidir.

.animate()

JQuery .animate () yöntemi, işini gören bir yöntemidir. $('html, body').animate({scrollTop:0}, '300');

animate () yönteminin ilk parametresi, canlandırmamız gereken özellikleri listesidir. Özelliğimiz scrollTop olarak adlandırılır. 0 değerine sahip olmasını isteriz. Bu parametrenin tipi düz nesnedir ve bu yüzden küme parantezlerinizi kullanmamız anahtar / değer çift sözdizimi kullanarak değerlerimizi yazmamız gerekir. İkinci parametre, animasyonun çalışma hızıdır. Milisaniye cinsinden ölçülür. Sayı ne kadar yüksek olursa animasyonu o kadar daha yavaş çalışır. Varsayılan sayı 400'dur, ancak 300 'e değiştirdim. En son, canlandırma yöntemini, web sayfamızdaki HTML ve gövde elemanlarına uygularız. Şimdi düğmeye her bastığımızda sayfanın üst kısmına geçeceğiz.

Demo

CodePen demosunda sonuçları görebilirsiniz. Ayrıca, gösterici amaçlı olarak bazı örnek metinleri ekledim.

CodePen'de Maatthew Cain (@matthewcain) tarafından sunulan Başa Dön Butonuna bakın.

Son düşünceler

Başa dön düğmeler, bir web sayfasının kullanılabilirliği açısından harika bir öğesidir. Umarım bu rehber, CSS ve JavaScript bilginizi genişletmenize yardımcı olduk.