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ı
İbrahim Dal kullanıcısının resmi
İbrahim Dal posted on Salı, 04/28/2009 - 23:34

Uzun zamandır bunu nasıl yapabileceğimi düşünüyordum. Yazı için teşekkürler.

Misafir kullanıcısının resmi
Misafir posted on Per, 10/22/2009 - 22:52

peki mesela bir butona tıkladığımızda sayfayı otomatik olarak nasıl istediğimiz div'e gönderebiliriz. bunuda açıklarsan çok sevinirim. teşekkürler

Misafir kullanıcısının resmi
Misafir posted on Cum, 05/21/2010 - 15:09

yorum yapma kodunuda paylaşırsanız sevinirm

Yusuf kullanıcısının resmi
Yusuf posted on Pzt, 05/31/2010 - 15:24

Teşekkürler, çok işime yaradı.

Fatih K. kullanıcısının resmi
Fatih K. posted on Çar, 06/09/2010 - 16:20

Teşekkürler, çok açık bir şekilde anlatmışsınız.

Elinize sağlık.

ahmet faruk güneş kullanıcısının resmi
ahmet faruk güneş posted on Çar, 12/08/2010 - 00:42

selam anlattığınızı uyguladım fakat çalıştıramdım. örnek linke bağlarmısınız.

blues kullanıcısının resmi
blues posted on Çar, 12/08/2010 - 09:13

Merhaba,

http://demos.flesler.com/jquery/scrollTo/ adresinde, uygulamanın örneklerini bulabilirsiniz.

Yeni yorum ekle