Merhabalar,
Bu yazımda bir çok sitede mevcut ve kullanıcıların da kullanım kolaylığı açısından beğendiği aşağı inince görünen yukarı çık butonunun örnek bir yapımını anlatacağım.
Özet olarak anlatırsak, içinde isteğe bağlı yukarı doğru yönü olan bir ok barındıran bir eleman oluşturuyoruz. Bunu ilkte gizleyip sadece aşağı inince görünür hale getiriyoruz. Tabii ki aşağı inmeyi yine Jquery ile kontrol edip işlem yapabiliyoruz. Jquery ile scroll (kenar çubuğu) hareketini kontrol edebiliyoruz. Aşağıda incelediğinizde görebileceksiniz.
Öncelikle HTML üzerinde elemanımızı oluşturup tasarım ve ikon işlemlerimizi halledelim.
<!DOCTYPE html>
<html lang="tr">
<head>
<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>
</head>
<body>
<div id="yukari">
<i class="fa fa-arrow-up"></i>
</div>
</body>
</html>
Özetle;
- Font Awesome v4.70 ikon dosyamızı çağırdık.
- Bir div elemanı oluşturduk div elemanını kullanmanız zorunlu değildir istediğiniz başka bir elementi kullanabilirsiniz. İçerisine Font Awesome’dan yukarı ok ikonunu yerleştirdik
#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
} Css aşamasında butonumuzun daha güzel görünmesini sağladık. Arka plan renklerini ve konumunu kendi isteğinize göre ayarlayabilirsiniz.
Elaman oluşturma ve tasarım aşamalarımız bitti. Geriye kalan kısım oluşturduğumuz elemanı, aşağı inme olayını yakaladığımızda göstermek olacak. Bunun için Jquery kodları aşağıdaki gibi olabilir.
// Kayma
$(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);
});Yukarıda ki Jquery kodu ile birlikte işlemimiz tamamlanmış oluyor. Kısaca onu da özetlersek;
- Scroll (Kayma) olayı gerçekleşmesi yakalandığında ilk fonksiyon çalışıyor.
- Scroll’un yukarıya olan mesafesi 350 değerine eşitse veya daha yüksekse Yukarı Çık butonumuz fadeIn sayesinde solma efekti ile birlikte görünüyor. Else kısmı çalıştığında yani değilse tekrar fadeOut ile solarak butonu gizliyoruz.
- Click (tıklama) olayı gerçekleştiğinde ise yine bir fonksiyon çağrılıyor. İçindeki animate sayesinde scrollTop değerini 0′ a çekip sayfanın en yukarısına güzel bir animasyonla çıkarıyor.
Yazının başında da söylediğim gibi oldukça çok kullanılan popüler bir buton ve yapıdır. İşinize yaraması dileğiyle.
Mutlu Kodlamalar 🙂
4 comments
Merhaba Furkan Bey,
Kodları kullandım Jquery kütüphanesini de ekledim ama bir türlü yukarı çıkma butonu gözükmedi. Yardımcı olursanız sevinirim.
Merhaba Yusuf Bey,
Eklediğiniz sayfanın belli bir yüksekliği var değil mi ? Aşağı indirdiğiniz takdirde mi gözükmüyor ? Örnek olarak body etiket yüksekliğine 5000px değer verip deneyebilirsiniz. Ekte paylaştığım görselde sorunsuz çalışmaktadır.
https://prnt.sc/sbc1ysNJT5cZ
Merhabalar.Düzgün çalışıyor fakat sayfayı en aşağıya indirmem gerekiyor butonun gözükmesi için.Fakat ben istiyorumki biraz aşağıya inince gözüzüksün yardımcı olursanız sevinirim.Teşekkür ediyoru.
Merhabalar,
Öncelikle askerlik görevimi yaptığım için geç cevaplıyorum kusura bakmayın. jQuery kodunda if kısmındaki scrollTop() değerini isteğinize göre düşürüp kullanabilirsiniz. Videoda gördüğünüz gibi zaten biraz aşağıya inince görünmektedir.