JQuery İle “Yukarı Çık” Buton Uygulaması

Bir web sitesine Scrollbar aşağıya doğru kaydıkça sitenin üst kısımlarına dönmeyi kolaylaştıracak “Yukarı Çık” butonu koymak iyi fikir gibi geliyor.Hem sitenin üst kısımlarını kullanıcıya hatırlatacaktır hem de görünmeyen üst kısımlarda slayt vs. gibi değişken haberler bu buton vesilesiyle daha verimli kullanıcı ilgisine maruz kalacaktır.

Bu yazımda sizlere paylaşacağım JQuery kodları ile bu işlemi animasyonlu bir şekilde gerçekleştirebileceğiz.

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

Yukarıdaki JQuery kodu sayesinde “Yukarı Çık” butonumuzun işlevselliğini ayarlamış bulunmaktayız.
Şimdide “Yukarı Çık” butonumuzun görsel tasarımını CSS ile ayarlayalım.

        #top {
            bottom: 5px;
            bottom: 20px;
            display: none;
            height: 100px;
            position: fixed;
            right: 20px;
        }

Son olarakta butonumuzun HTML kodlarını yazalım.

    <div id="top">
        Yukarı Çık<br />
        <img width="50" height="50" src="yukaricik.png" />
    </div>

Evet işlemimiz bu kadar.Bu işlemlerin derlenmiş halini aşağıda yayınlamakta fayda var.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#top").click(function () {
                // Sayfamızı kaydıracak olan kod burasıdır.
                $("html,body").stop().animate({ scrollTop: "0" }, 1000);
            });
        });
        $(window).scroll(function () {
            var uzunluk = $(document).scrollTop();
            if (uzunluk > 300) $("#top").fadeIn(500);
            else { $("#top").fadeOut(500); }
        });
    </script>
    <style type="text/css">
        #top {
            bottom: 5px;
            bottom: 20px;
            display: none;
            height: 100px;
            position: fixed;
            right: 20px;
        }
    </style>
</head>
<body>
    <div id="top">
        Yukarı Çık<br />
        <img width="50" height="50" src="yukaricik.png" />
    </div>
</body>
</html>

Yaptığımız bu uygulamayı buradan çalışır bir vaziyette inceleyebilirsiniz.

İyi çalışmalar…