Özellikle tek sayfa website tasarımlarının oluşturulma mantığı, sayfa kaydırma (Scrolling) üzerinedir. Fakat bu özelliği çeşitli website uygulamalarınızda da kullanabilirsiniz (resim kaydırma, içerik kaydırma, haber kaydırma vb.)
Window nesnesinin "scrollBy()" metodu ile sayfamızı istediğimiz ölçülerde sağa sola, aşağı yukarı kaydırabiliriz. Bu tip kaydırma işlerini, jQuery ile çok daha kolay yapabilirsiniz, fakat daha önce de bahsettiğim gibi, jQuery'nin mantığını iyi anlamak için, işin özü olan javascript kodlamasının da nasıl olduğunu bilmek gerekir. Sonuçta jQuery, javascript dili kullanılarak oluşturulmuş bir nevi "javascript framework sistemi"dir (smarty template engine gibi), javascript gibi kendi başına bir dil değildir.
Söz dizimi..
Gösterim: window.scrollBy(yatay,dikey);
yatay: yatay mesafe;
dikey: dikey mesafe
Uygulama..
Aşağıda "scrollBy()" metodunun kullanımı ile ilgili basit bir fonksiyon gösterilmekte, kodların doğru çalışması için, içeriğinizin web sayfanızı aşması ("overflow"), yani sayfanın altına kadar uzaması gerekir, bu sebepten tarayıcınızın boyutunu duruma göre küçülterek denemelerinizi yapın.
<script type="text/javascript">
function asagiKaydir()
{
window.scrollBy(0,100)
}
</script>
Yukardaki fonksiyonda, web sayfamızın dikey olarak 100px kaymasını istiyoruz. Bu fonksiyonu bir buton yardımıyla tetikleyerek sonucu görebilirsiniz. Aşağıda tam bir uygulama gösterilmektedir
<script type="text/javascript">
function asagiKaydir()
{
window.scrollBy(0,100)
}
</script>
<input type="button" onclick="asagiKaydir()" value="Kaydır" />
<p>Bu kısım içerik olacak ama aşağı kadar gitmeli ki.</p><br />
<p>Bu kısım içerik olacak ama aşağı kadar gitmeli ki.</p><br />
<p>Bu kısım içerik olacak ama aşağı kadar gitmeli ki.</p><br />
<p>Bu kısım içerik olacak ama aşağı kadar gitmeli ki.</p><br />
<p>Bu kısım içerik olacak ama aşağı kadar gitmeli ki.</p><br />
<p>Bu kısım içerik olacak ama aşağı kadar gitmeli ki.</p><br />
<p>Bu kısım içerik olacak ama aşağı kadar gitmeli ki.</p><br />
<p>Bu kısım içerik olacak ama aşağı kadar gitmeli ki.</p><br />
<p>Bu kısım içerik olacak ama aşağı kadar gitmeli ki.</p><br />
<p>Bu kısım içerik olacak ama aşağı kadar gitmeli ki.</p><br />
<p>Bu kısım içerik olacak ama aşağı kadar gitmeli ki.</p><br />
Sonuç..
Sayfa kaydırma (Scrolling) özelliği, website alanlarınızı daha ekonomik kullanma imkanı sağlar. Göstermek istediğiniz verileri daha az alan içinde göstermiş olursunuz.
Özellikle teksayfa website ("Single page website") tasarımlarında sıkça kullanılır, daha farklı çözümleri de vardır. jQuery bu tip uygulamalar için işimizi oldukça kolaylaştırmıştır.
Görüşmek üzere...
