Son dönemlerde sayfalarda moda haline gelen menüye tıklayınca sayfa değişmek yerine aşağıya doğru kayan sayfaların nasıl yapıldığından bahsetmek istiyorum.
Bunun için kullanacağımız jQuery eklentisinin ismi Scroll It (scrollit.js).
Eklentiyi buradan indirebilirsiniz.
Gelelim sayfamıza nasıl entegre edeceğimize ve kullanımına.
Öncelikle indireceğiniz klasör içerisinde bizim için gerekli olan dosya scrollIt.js veya scrollIt.min.js`dir.
Bu javascript dosyalarından birini sayfamıza entegre edelim. (Bu iki dosyanın farkı scrollIt.min.js nin sıkıştırılmış olmasıdır.)
Önce js doyasımızı sayfalarımızın bulunduğu klasöre kopyalayalım. Ardından /body etiketinden önce aşağıdaki kodları ekleyelim:
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="scrollIt.js" type="text/javascript"></script>
<script>
$(function(){
$.scrollIt();
});
</script>
Daha sonra menümüz için eklememiz gereken kodları ekleyelim. Örnek bir menü oluşturacağım siz kendi menünüze data-scroll-nav="rakam" şeklinde ekleme yapacaksınız.
<a data-scroll-nav="0">About</a>
<a data-scroll-nav="1">Usage</a>
<a data-scroll-nav="2">Options</a>
Burada önemli olan a etiketi içerisinde data-scroll-nav="rakam" niteliğini kullanmanız. Burada rakam yazdığım yere sırasıyla rakamlar yazarak bir sonrakı adımda hangi bölümü çağırdığımızı söylemiş oluyoruz.
Ardından çağırmak istediğimiz bölümler için ayarlamamızı yapalım:
<div data-scroll-index="0">..content..</div>
<div data-scroll-index="1">...</div>
<div data-scroll-index="2">...</div>
Burada da div etiketimiz içerisine data-scroll-index="rakam" yazarak menümüzde hangi rakamı çağırmışsak ona ait bölüme kadar sayfamızın kaymasını sağlamış oluyoruz.
Bir de sayfamızı aşağıya doğru kaydırdıktan sonra yukarı doğru kaydırmak yani geri dönmek istiyorsak şöyle bir ekleme yapabiliriz:
<a data-scroll-goto="0">Back to top</a>
Bu kısımda da a etiketi içerisine data-scroll-goto="0" yazarak 0. elemana kadar yukarı kaydırmasını sağlamış oluyoruz.
Kaynak: ScrollIt.Js
Yanıtla
gürcan
bütüm çalışmalarıma rağmen site temasına monte etmeyi başaramadım kod bilgisi olan yardımcı olacak birini arıyorum
29.09.2016, 11:18:49Yanıtla
Erdal
MaşaAllah detaylı ve açıklayıcı bilgi. Teşekkürler kardeşim.
30.01.2019, 23:34:34Yanıtla
Dursun Karalı
İşte bu üstad teşekkürler. Aradım sonunda çözümü burada buldum ilmine ve sana saygılarımı sunuyorum. Tebrikler. Site kaliteli, içerik kaliteli, uslup kaliteli. Siteyi kaybetmemek adına takibe aldım ve sık kullanılanlara ekleyiverdim. iyi çalışmalar.
24.09.2020, 1:47:11