Merhabalar,

Bu yazımda birçok sitede kullanılan ve kullanıcılar açısından oldukça faydalı olan “Yukarı Çık” butonunun nasıl yapılacağını anlatacağım.

Temel olarak, sayfa aşağı kaydırıldığında görünen bir buton oluşturuyoruz. Bu buton tıklanınca kullanıcıyı sayfanın en üstüne çıkarıyor. Bu işlemleri jQuery ile gerçekleştireceğiz.

Öncelikle HTML tarafında butonumuzu ve ikonu oluşturalım:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<title>Yukarı Çık Butonu</title>

<div id="yukari">
  <i class="fa fa-arrow-up"></i>
</div>

Burada:

• Font Awesome kütüphanesiyle ok ikonunu çağırıyoruz.
• <div id="yukari"> ile butonumuzu oluşturuyoruz.

Şimdi CSS ile butonumuzu stilize edelim:

#yukari {
  display: none;
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #00b2f2;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 35px;
  transition: all .3s ease;
  z-index: 999;
}

#yukari i {
  color: #fff;
  font-size: 20px;
}

#yukari:hover {
  background-color: #fcb100;
}

Görünüm tamam! Şimdi sıra jQuery ile butonun davranışlarını tanımlamaya geldi:

// Kaydırma
$(window).scroll(function() {
  if ($(this).scrollTop() >= 350) {
    $('#yukari').fadeIn(200);
  } else {
    $('#yukari').fadeOut(200);
  }
});

// Tıklama
$('#yukari').on('click', function() {
  $('html, body').animate({ scrollTop: 0 }, 1000);
});

Özetle:

• Sayfa 350 piksel aşağı kaydırıldığında buton görünür hale gelir (fadeIn).
• Daha yukarıdaysa tekrar kaybolur (fadeOut).
• Butona tıklanınca sayfanın üstüne animasyonla çıkar (scrollTop: 0).

Bu buton hem pratik hem de kullanıcı deneyimini artıran popüler bir bileşendir.

Umarım işinize yarar.

Mutlu Kodlamalar :)