jQuery ile Kaydırma Efekti - Sayfada Bir Yere Gitmek

jQuery ile Kaydırma Efekti - Sayfada Bir Yere Gitmek
Bu yazıda ne öğreneceğiz? Bu yazımızda jQuery javascript kütüphanesini kullanarak bulunduğumuz web sayfası içerisinde bir butona tıklayarak yine aynı sayfa içerisinde başka bir alana gitmeyi öğreneceğiz. Bu sayede kullanıcılarınıza yol gösterici ve ya onları yönlendirici hoş butonlar hazırlayabilirsiniz.

Bu anlatımını yapmış olduğum sistemi bütün web sayfalarınız da uygulayabilirsiniz. Wordpress yada Blogger veya daha başka bir yazılım farketmez.

Şimdi öncelikle sayfamızı HTML düzenleme modun da açalım bunu siz kendi yazılımınıza göre yapabilirsiniz.

Blogger: Panelde > Şablon > HTML Şablon Düzenle

Wordpress: Panelde > Görünüm > Düzenleyici

Öncelikle sayfamıza jQuery kütüphanesini çağıracağız, bunun için sayfamızın <head> ---- </head> etiketleri arasında herhangi uygun gördüğümüz bir yere

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

satırını ekliyoruz. Fakat burada belirtmek istediğim bir nokta var, bu jquery kütüphanesi genelde birçok web yazılımında zaten hali hazırda çağırılır. Siz sayfanız içerisinde arama yapınız eğer jquery.min.js adının geçtiği bir yer varsa yukarıdaki satırı eklemenize lüzum yok. Şayet bu isim sayfanız içerisinde geçmiyorsa yukarıdaki satırı ekleme işlemini gerçekleştirmelisiniz yoksa birazdan ekleyeceğimiz kodlar tanımlanmaz ve çalışmaz.

Buton ekliyoruz bakınız aşağıda kodlar mevcut;

<div class="buton">
    <button type="button" onclick="smoothScroll(document.getElementById('gidilecek-yer'))">Hadi Gidelim</button>
</div>

Daha sonra gidilecek alanımızı ekliyoruz. ( Eğer sizin gideceğiniz alan zaten varsa eklemenize gerek yok.

<div class="gidilecek-yer" id="gidilecek-yer">Merhaba Dünya</div>

Şimdi yukarıdaki ilk kodumuz bizim butonumuzu oluşturacak "Hadi Gidelim" yazan yeri istediğiniz gibi değiştirebilirsiniz. Biraz önünde parantez içerisinde ('gidilecek-yer') yazan kısım ise sizin sayfanız içerisinde gitmek istediğiniz bölgenin id sidir. Yani tanımlayıcısı. Bu ister <div> olsun ister <a> olsun ne olursa farketmez yeterki id tanımlayıcısı olsun.

Şimdi geldik işin en cafcaflı yerineee..

Sayfamızda </body> etiketini buluyoruz ve hemen öncesine aşağıdaki kodları ekliyoruz.

Blogger için olan:

<script type='text/javascript'>
//<![CDATA[
// Default Nivo Slider



window.smoothScroll = function (target) {
    var scrollContainer = target;
    do { //find scroll container
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop == 0);

    var targetY = 0;
    do { //find the top of target relatively to the container
        if (target == scrollContainer) break;
        targetY += target.offsetTop;
    } while (target = target.offsetParent);

    scroll = function (c, a, b, i) {
        i++;
        if (i > 30) return;
        c.scrollTop = a + (b - a) / 30 * i;
        setTimeout(function () {
            scroll(c, a, b, i);
        }, 20);
    }
    // start scrolling
    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}


//]]>
</script>

Diğer sistemler için olan:

<script type='text/javascript'>


window.smoothScroll = function (target) {
    var scrollContainer = target;
    do { //find scroll container
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop == 0);

    var targetY = 0;
    do { //find the top of target relatively to the container
        if (target == scrollContainer) break;
        targetY += target.offsetTop;
    } while (target = target.offsetParent);

    scroll = function (c, a, b, i) {
        i++;
        if (i > 30) return;
        c.scrollTop = a + (b - a) / 30 * i;
        setTimeout(function () {
            scroll(c, a, b, i);
        }, 20);
    }
    // start scrolling
    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
</script>

Evet işte bu kadar, olay bitmiştir. Ayrıca kodun çalışan halini test etmek isterseniz aşağıdaki Result sekmesine bakmanız yeterli. Yazımı buraya kadar okuduysanız teşekkür ederim, okumadıysanız zaten bunu da görmezsiniz. :)