jQuery ile sayfayı yukarı kaydırma

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