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…

Bunlar da hoşunuza gidebilir...

10 Cevaplar

  1. Hakan Dora dedi ki:

    Paylaşımınız için teşekkür ederim.

  2. Aykut dedi ki:

    Teşekkür ederim. Bir projemde kullandım.
    İyi Çalışmalar..

  3. bicümle dedi ki:

    Peki bunu popup olarak nasil ayarlayabiliriz ? Yani asagi inince o buton belirecek ama tiklayinca da popup acilmasini saglayacagiz

  4. Doğukan dedi ki:

    Teşekkür ederim

  5. Bülent dedi ki:

    Çok teşekkür ediyorum, gerçekten işime yaradı.

  6. azra dedi ki:

    Teşekkürler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*