Sayfa İçerisinde jQuery ile Kaydırma Efekti Geçiş Yapmak

6.081 kez okundu

 jQuery ile Kaydırma Efekti

 

Merhaba arkadaşlar, bu yazımda sizlerle jQuery kullanarak sayfadaki istenilen bir bölgeye kayma efekti ile geçiş yapmanızı sağlayan bir örnek paylaşacağım. Vakit kaybetmeden jQuery ile Kaydırma Efekti işlemine başlayalım.

Yapmamız gereken, ulaşmak istediğimiz bölgeyi bir element içerisine almak ve bu elementimize bir id vermek. Daha sonra verdiğimiz idye göre gidilecek bölgeyi seçtiriyoruz ardından click eventi verdiğimiz butona tıklıyoruz ve sonuca ulaşıyoruz.

Not: jQuery kütüphanesini sayfanıza referans etmeyi unutmayınız aksi takdirde JS kodlarınız çalışmayacaktır.

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>

Örnek Kullanımı ve Kodlar:

Result bölümüne tıklayarak örneği canlı olarak deneyebilirsiniz.

Bu örneği tek sayfa menü yapımında kullanabilirsiniz, yapmanız gereken menünüzdeki linklerin ‘onclick’ olayına yukarıdaki örnekteki gibi gerekli kodları yazarak gitmek istediğiniz elementin idsini belirtmek olacaktır. Sonrasında istediğiniz sonuca ulaşabilirsiniz.

Sonuç

Evet arkadaşlar bu yazımda sizlere sayfada istenilen bir alana kaydırma efekti ile nasıl geçiş yapacağımız ile ilgili bir örnek paylaştım, umarım faydalı olmuştur.

Soru ve önerilerinizi yorum olarak ya da e-mail göndererek iletebilirsiniz, teşekkürler.

Bunlar da hoşunuza gidebilir...

6 Cevaplar

  1. kerem dedi ki:

    Hocam bu örneği buton olmadan nasıl kullanabiliriz. Yani buton yok ve sayfa açılır açılmaz herhangi bir komut yada click olmadan direk istediğimiz dive inecek. Umarım anlatabilmişimdir.

    • tolgacelik dedi ki:

      Merhabalar, bunu yapmanız için javascript document ready fonksiyonu içine kodlarınızı yazmanız gerekiyor. Biz yukarıda butona tıklandığında smoothScroll fonksiyonunu çalıştırmıştık, sizin bu fonksiyon içindeki kodları document ready fonksiyonuna yazmanız gerekiyor. Aşağıda paylaşıyorum..

      $( document ).ready(function() {
      //Kodlar Buraya gelecek.
      });

  2. Bahadir dedi ki:

    selam kodunuzu sayfamda kullanacağım. Küçük bir yardıma ihtiyacıma var. Ben yukarıya çıkacak in 0 a değilde 80 e çıkmasını istiyorum. Nasıl yapacağım konusunda aydınlatırsanız sevinirim.

  3. teşekkürler kardeşiim çok işime yaradı aradığım bir şeydi bunu kaydıran menu kullanımında tek parça web sitesi yapımında kullandım güzel paylaşım faydalı tebrikler 🙂

    • tolgacelik dedi ki:

      Merhabalar, rica ederim yardımcı olabildiysem ne mutlu 🙂 Bilgi paylaştıkça çoğalır, kolay gelsin. 🙂

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Time limit is exhausted. Please reload CAPTCHA.

Tipobe365 Giriş