alexa  Menu
jquery write less do more

jQuery ile sayfayı yukarı kaydırma

  05.10.2014 ,   4 yorum ,   15.350 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

4 yorum yapılmış

    Səhifəni üfüqi hərəkət etdirmək - Scroll Page Horizontally

    […] Jquery kitabxanalarını əlavə etdikdən sonra səhifəmizə məlumatlarımızı əlavə edək. Məlumatları əlavə edərkən xüsusi formadan istifadə edəcəyik. Belə ki, məlumatlarımız page-wrap id`li div içərisində post sinifi onun içərisində də h2 etiketi ilə başlıq və p etiketi ilə mətn şəklində daxil edilməlidir. Bunun səbəbi isə bir sonraki addımlarda açıqlanacaq. Məlumatımız aşağıdaki formada body etiketləri arasına əlavə edilməlidir: […]

    06.02.2020, 21:01:07

    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

    sali soylu

    selamlar emlak ofisimi üst sıralara nasıl alırım

    08.06.2019, 9:42:17

Yorum yapın..

isim yerine gerçek isim ve soyisim yazılmadan yapılan yorumlar kesinlikle onaylanmıyor bilginiz olsun.


The reCAPTCHA verification period has expired. Please reload the page.


%d blogcu bunu beğendi: