alexa  Menu
jquery write less do more

jQuery ile sayfayı yukarı kaydırma

  05.10.2014 ,   2 yorum ,   8.847 kez okundu.

Hemen hemen tüm internet sayfalarında gördüğümüz bir uygulama olan sayfayı yukarı kaydırma işlemi jQuery kütüphanesi ile nasıl yapılır konusunu anlatmaya çalışacağım.

Öncelikle sayfamıza jQuery kütüphanesini ekleyelim:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Daha sonra sayfada örneği uygulayabilmemiz için bir div oluşturacağız ve yüksekliğini 1000px olarak gireceğiz. Normalde sayfada böyle birşey yapmanıza gerek yok. Çünkü sayfanıza içerik girdiğinizde zaten sayfa aşağıya doğru kayacaktır. Ardından sayfanın en altına Yukarı kaydır yazan bir bağlantı oluşturacağız. Örnek için 1000px yüksekliğe sahib div ve Yukarı kaydır yazılı bağlantı oluşturmak için kodlarımızı yazalım:

HTML kodlarımız:

<div class="wrapper">scroll oluşması için yükselikliği 1000px olan bir div.</div>
<a href="#" class="yukarikaydir">Yukarı kaydır</a>

CSS kodlarımız:

.wrapper {
    background-color:#CCC;
    height:1000px;
}
.yukarikaydir {
    display:none;
    background-color:#CCFF00;
    padding:10px;
    position:fixed;
    bottom:10px;
    right:10px;
    text-decoration:none;
    color:#000;
}

Evet örnek olarak 1000px yüksekliğinde bir div oluşturarak scrollbar`ın oluşmasını sağladık. Sayfamızın en altında da Yukarı Kaydır bağlantısı var ama css kodlarında display:none; dediğimiz için sayfada gözükmüyor.

Şimdi jQuery kütüphanesini baz alarak kodlarımızı yazacağız. Yapmamız gereken işlem şöyle, sayfamızı aşağıda doğru 100px kaydırınca Yukarıya Kaydır düğmesi belirecek ve sabit olarak sayfanın en alt kısmında sağ tarafta gözükecek ve tıklanınca sayfayı yukarıya doğru kaydıracak. Şimdi kodlarımızı yazalım:

<script>
$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.yukarikaydir').fadeIn();
        } else {
            $('.yukarikaydir').fadeOut();
        }
    });

    $('.yukarikaydir').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });
});
</script>

İşlemimiz tamamlanmıştır.

Örnek uygulama:

DEMO

2 yorum yapılmış

    Mahmut ÇEVİK

    Merhaba Hocam. Sizi 2009’dan beri takip ediyorum. Allah Razı olsun. Yine Yerinde bir ders olmuş. İnanmıyacak sınız ama çoktandır böyle birşey arıyordum. bazı forum ve bloglarda karşılaştım ama bir türlü çözememiştim. bu tür bulaşların devamını sizlerden bekliyoruz.

    01.07.2015, 23:44:27

Bir Cevap Yazın


%d blogcu bunu beğendi: