JQuery İle Sayfa Başına Dön Butonu Yapımı JQuery İle Sayfa Başına Dön Butonu Yapımı

Gönderen: Kaan   Tarih: 2019-07-19 17:07 Kategori: Php-Html5-Css-jQuery-Mysql | Okundu: 212

Php Html5 Css jQuery ile İlgili Son GönderilerDaha Fazlası

Bu örneği birçok web sayfasında görmüşsünüzdür. Sayfa uzunlamasına aşağıya doğru gider. Ama kullanıcı başa dönmek istediğini de sürekli yukarı (scroll) çıkması gerekmektedir. Bir buton yardımı ile bu işi kısaltalım. Bu örneğimizde JQuery kullanarak sayfa başına çıkacağız.


İlk olarak html iskeletimizi oluşturalım.

Sayfamızda Scroll görünmesi için Div etiketlerinin içerisi dolduralım.

<!DOCTYPE html>
<html>
<head>
  <title>Sayfa başlığı</title>
</head>
<body>
  <div>
    <!--
      sayfamızı scroll gösterilinceye kadar veriler ile dolduralım
     -->
  </div>
  <p class="totop"> 
      <a id="top">
        <img src="https://icons.iconarchive.com/icons/saki/nuoveXT/48/Actions-arrow-up-icon.png">
      </a> 
  </p>
</body>
</html>

“Yukarı çık” butonumuzu Css ile özellştirelim

Css  ile “Yukarı çık” butonumuzu sağ tarafa sabitleyelim ve özelleştirelim.

.totop a {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  cursor: pointer;
}

Ve son butona tıklandığında JQuery ile animasyonla yukarı çıkalım

Sayfa aşağıya kaydığında butonumuzu gösterelim ve tıklama özelliğini özelleştirelim.

$(function(){
    $('#top').click(function () {
    $('body,html').animate({
      scrollTop: 0
      }, 600);
      return false;
  });
  $(window).scroll(function () {
    if ($(this).scrollTop() > 15) {
    $('.totop a').fadeIn(500);
    } else {
    $('.totop a').fadeOut(500);
    }
  });
});

Bu şekilde sayfa en başında iken buton görünmeyecek aşağıya doğru gelindiğinde ile buton görünecek. Ve butonu muza tıklandığında sayfa animasyonlu olarak yukarıya kadar çıkacaktır.



Yorumlar: (0)

Henüz yorum yapılmamıştır.

Yorum:

CAPTCHA


WhatsApp, Reklam Hakkında Geri Adım Attı
WhatsApp, Reklam Ha...
Atatürk tasarladı Danimarka uyguladı
Atatürk tasarladı D...
IPTV ile Korsan Maç Yayını Yapan ve İzleyenlere Hapis Cezası
IPTV ile Korsan Maç...
Wikipedia ile ilgili flaş gelişme Wikipedia açılacak mı?
Wikipedia ile ilgil...
2020 İlk Google Algoritma Güncellemesi Duyuruldu
2020 İlk Google Alg...
2020 Oscar adayları açıklandı! İşte "yılın en iyisi" olmak için yarışacak filmler
2020 Oscar adayları...