JQuery Alanı Jquery ile Yukarı Çık Uygulaması Yapımı

Kaliteli ve kullanışlı her site, kullanıcılarını düşünür ve onlara daha iyi bir tecrübe yaşatmak için çalışır. Kuşkusuz bir sitenin olmazsa olmaz özelliklerinden biri, kullanıcıları sayfanın üst kısımlarına çıkmasını uğraşlı hale gelmemesi için kullanılan Yukarı çıkarma namı değer “Go Top” tuşunun olmasıdır.

Sizler için jquery ile belli bir yükseklik aşağıya indikten sonra açılan Yukarı Çık butonunun nasıl yapılacağını anlatacağım.

İlk olarak HTML Kodlarımız:

<div id="top">Yukarı Çık</div>

#top id bilgisi ile jquery kodumuz etkileşimde bulunacaktır.

CSS Kodları:

#top{
background: #fff;
    bottom: 15px!important;
    bottom: 20px;
    padding: 10px;
    display:none;
    position: fixed;
    border-radius: 50px;
    z-index: 999;
    right: 15px;
}

Şimdi ise JQuery kodlarımız:

<script type="text/javascript">
      $(function() {
          $("#top").click(function() {
              $("html,body").stop().animate({ scrollTop: "0" }, 1000);
          });
      });
      $(window).scroll(function() {
          var uzunluk = $(document).scrollTop();
          if (uzunluk > 800) $("#top").fadeIn(500);
          else { $("#top").fadeOut(500); }
      });
  </script>

Bu kodumuzda 800 olan değeri istediğiniz gibi değiştirebilirsiniz. Bu değer ne kadar aşağıya inildiğinde butonun görüleceği ile alakalıdır.

500 olan değerler ise ne hızla yukarı çıkılacağı ile ilgilidir.