Jquery ile Yukarı Çık Uygulaması (Uçan Kartal) - Go Up Component with Jquery (Flying Eagle)

Bu yazıda bloğa yeni eklediğim yukarı çık uygulamasının nasıl oluşturulduğu üzerinde duracağım. Bu uygulama ile kullanıcı sayfanın aşağı taraflarına doğru indiğinde sağ alt köşede görünen bileşen yardımıyla en üstüne çıkabilmektedir. Bu yazı aynı zamanda jquery ile "scroll" işlemlerinin nasıl yapıldığı anlatılmaktadır.

Öncelikle CSS kodlarını tanımlayalım:

<style>

        .FlyingEagle {

            position:fixed;
            background-image:url('Images/eagle5.png');
            width:150px;
            height:150px;
            background-size:150px 150px;
            display:none;
            top:100%;
            left:100%;
            margin-top:-180px;
            margin-left:-180px;
            opacity:0.7;
        }

</style>

Yukarıdaki CSS kodlarında önemli noktalardan ilki "position:fixed" tanımlamasıdır. Bu tanımlama ile sınıfın üyesi olan elementin tarayıcı penceresine (window) göre pozisyon alması sağlanmaktadır. Yine "margin" değerleri kullanılarak elementin pozisyondan istediğimiz bir miktarda sapması (disposition) sağlanmaktadır. Elementin saydamlığı "opacity" niteliği kullanılarak azaltılmaktadır. Görüntünün taşıcıyı içine düzgün bir şekilde yerleştirilmesi amacıyla "background-size" niteliği kullanılmıştır. Bu nitelik ile görüntü elementin içine esnetilerek veya daraltılarak yerleştirilmektedir.

Sonraki aşamada javascript kodlarını tanımlayalım:

$(document).ready(function () {

            $(".FlyingEagle").click(function () {

                $("html, body").animate({ scrollTop: 0 }, 500);
            });

            $(window).scroll(function () {

                if ($(window).scrollTop() > 50) {

                    $(".FlyingEagle").show("fast");
                } else {

                    $(".FlyingEagle").hide("fast");
                }
            });
        });

Jquery "scroll" olayı yakalanarak kartal animasyonunun yönetimi yapılmaktadır. Jquery "show" fonksiyonu ile kartal gösterilmekte, "hide" fonksiyonu ile de saklanmaktadır. Jquery scrollTop fonksiyonu ekranın üstüne kaç piksellik kısımın kaydığını döndürmektedir. Bu yüzden sıfır değeri hiç kayma olmadığını göstermektedir. Bu kapsamda sayfa en fazla $(document).height() - $(window).height() kadar kaydırılabilir. Jquery "animation" fonksiyonu ile yukarı yumuşak bir biçimde çıkılması sağlanmaktadır. Son olarak da CSS sınıfı "FlyingEagle" olan bir "div" elementi sayfaya eklenir.