Sayfa İçerisinde jQuery ile Kaydırma Efekti Geçiş Yapmak
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.
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.
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.
});
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.
Merhabalar, aradığınız özelliği aşağıdaki linkte paylaşıyorum.
https://stackoverflow.com/questions/1144805/scroll-to-the-top-of-the-page-using-javascript-jquery
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 🙂
Merhabalar, rica ederim yardımcı olabildiysem ne mutlu 🙂 Bilgi paylaştıkça çoğalır, kolay gelsin. 🙂