JQuery ile Sayfayı Otomatik Kaydırmak

Her ne kadar şu "otomatik" kelimesini sevmesem de burada kullanmam gerekiyordu :) Bir projede gerekli olduğu için bu tarz bir uygulamaya ihtiyaç duydum.

Örneğin sayfanızın üst kısmı çok uzun görsel ve menülerden oluşuyor ve içeriğiniz alt tarafta kalıyor. Bu durum ana sayfa için doğal karşılanırken detay sayfalarda içeriği görüntülemek için sayfayı aşağı scroll ettirmek gerekiyor. Hal böyle olunca pek çok ziyaretçi sayfadaki içeriği göremeden sayfadan ayrılabiliyor ve sayfanın yenilendiğini bile farkedemeyebiliyor. Bu durumda ne yapmamız gerekiyor? Detay sayfalarda, sayfa yüklendiğinde otomatik olarak sayfayı içeriğin olduğu bölüme odaklamak !

Bu işlemi yapabilmek için tabiki JQuery'den faydalandım. Sayfayı çeşitli noktalara, farklı efektlerle kaydırabilmek için geliştirilmiş ScrollTo isimli bir plugin mevcut. Bu plugini kullanabilmek için tabiki öncelikle JQuery'yi sayfanıza dahil etmeniz gerekiyor:

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

Daha sonra da şuradan ScrollTo eklentisini indirip sayfanıza eklemelisiniz.

Bu işlemlerden sonra sayfanıza eklemeniz gereken kod ise şu şekilde:

<script type="text/javascript">
$(document).ready(kaydir);
function kaydir()
{
$.scrollTo( '#content', 800, {duration:3000} );
}
</script>

Burada sayfa yüklendiğinde #content id'sine sahip element'imiz sayfanın odak noktası oluyor. Sondaki duration değeri ise bu kaydırma işleminin yapılacağı süreyi belirliyor. Bunun gibi easing, axis,margin vs. gibi çeşitli pek çok parametre de bulunuyor.

Umarım bu uygulama pek çok kişinin işine yarar ;)

Yorumlar

Facebook Yorumları
Tekno Dergi Yorumları

Yeni yorum ekle