jQuery ile sayfayı otomatik aşağı kaydırmak. Yardım!

__OsKi__ · 27 Aralık 2013

Merhaba arkadaşlar, başlıkta bahsettiğim konuda yardıma ihtiyacım var, gerekli araştırmayı yaptım ve şu sitede şöyle bir makale buldum. Bu yazı tam da benim yaşadığım sorunu anlatıyor.

http://teknodergi.org/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 durationdeğ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

Burda bahsedilenleri Html sayfama uygulamam mümkün müdür ? Html ile kendime bir web sitesi oluşturuyorum ve bu işlerde çok yeniyim, burada bahsedilenleri nasıl uygulayabilirim biraz daha sade bir şekilde anlatıp yardımcı olabilirseniz çok sevinirim.

__OsKi__ · 28 Aralık 2013

Sorunun çözümünü buldum arkadaşlar

bu kodları sayfamızın head tagleri arasına ekliyoruz

Kod:

<script>
$(window).load(function(){
    $('html, body').animate({
        scrollTop: '430px'
    },1000);
});
</script>

430 değeri yerine ne kadar aşağı inmesini istiyorsanız o kadar yazın,,
1000 değeri de hız, ne kadar yavaş inmesi isteniyorsa o kadar arttırın göz kararı.

ugurturhal · 28 Aralık 2013

Javascript kullanıcı etkileşimli bir dil olduğundan, sunucu tabanlı programlama dillerine ihtiyaç duymadan kullanılmaya olana...

Eff ne diyorum arkadaş ben, Tabiki uygulayabilirsin aşk olsun

Şimdi istersen basit bir örnek yapalım.

HTML:

<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  // Burada son güncel jQuery dosyasını çağırdık.
<script src="http://balupton.github.io/jquery-scrollto/lib/jquery-scrollto.js"></script>  // Burada scroll to jquery dosyasını çağırdık. Ben online bir kaynak kullandım. Sen istersen yukarıda paylaştığın linkten dosyayı indirip direk sayfana ekleyebilirsin. 

<script>  // işte burası kaydırmayı yapan alan :) Mantık biraz farklı şimdiye kadar görmemişsindir büyük ihtimalle. Neyse biraz sabret, anlatacam :)
$(document).ready(function() {
    $(".kaydir").click(function(){
      $('#'+this.summary).ScrollTo();
    });
});
</script>

<body>  // Normal sayfamızın gövdesi    
<table width="10%" class="kaydir" summary="iki" height="100%" id="bir" bgColor="red" style="cursor:pointer;"> // Tablo 1        
     <th>Aşağı ?</th>    
</table>   

<table width="10%" class="kaydir" summary="bir" height="100%" id="iki" bgColor="blue" style="cursor:pointer;"> // Tablo 2        
     <th>Yukarı ?</th>    
</table>

</body>
</html> // Sonuç

Öncelikle kodun demosu burada http://jsfiddle.net/ay8Zt/

Şimdi yaptığımızı anlatalım. Önce jQuery dosyasını sayfaya ekledik.
Ardından ScrollTo fonksiyonunu içeren js dosyasını sayfaya ekledik.
Script kodumuzu yazdık. Kodun mantığı şu;

document ready kısmı sayfayı tarar.
(.kaydir).click kısmı, "kaydir" class' ına sahip (. olduğu için class, # olsaydı "id" olacaktı) nesneye tıklanması durumunda aktif olacak fonksiyonu içeriyor.
$('#'+this.summary).ScrollTo(); bu alan ise, tıklanan nesnenin summary değerini alıp, o id' ye sahip nesneye yönlendiriyor. Bir nevi dolaylı adresleme

Şimdi burada 2 tablo var.
1. tabloda summary="iki", id="bir"
2. tabloda summary="bir", id="iki"

dolayısıyla 1. tabloya tıklandığında kod şuna dönüşüyor;
$('#'+this.summary).ScrollTo();
this.summary "iki" verisini alacağından;
$('#iki").ScrollTo(); // Yani "iki" id' sine sahip nesneye kadar sayfayı kaydır.

ardından 2. tabloya tıklandığında, 2. tablonun summary değeri esas alınacağından;
$('#'+this.summary).ScrollTo();
this.summary "bir" verisini alacağından;
$('#bir").ScrollTo(); // Yani "bir" id' sine sahip nesneye kadar sayfayı kaydır.

Burada sadece yukarı ya da sadece aşağı mantığını da kullanabilirsin. Ben bilerek böyle bir fonksiyon yazdım. Böylece sayfada istediğin kadar nesneye tek bir fonksiyon ile kaydırma yapabilirsin. Yeter ki tıkladığın nesnedeki "summary" verisi, gitmek isteyeceğin nesneye ait "id" bilgisini içersin.

Şimdi bunun bir de onClick olan versiyonu mevcut. Bunu bilerek yazmadım ki örneklere bakarak sen yaz diye

Biraz gıcıkça ama olsun, en iyi öğrenme, uygulama metodudur. Şimdi sen diyeceksin ki, e arkadaş bu benim işimi görüyor, diğerini yazmakla niye uğraşayım ben? İşte burada ufak bir hile mevcut (bilerek yapılmış). Table haricinde kullanacağın nesnelerde bu kaydırma işlevi çalışmayacaktır. Sebebini araştıra araştıra bulabilir, hatta sonuca ulaştığında, bu fonksiyonu div' lere, resimlere ya da herhangi bir nesneye uygun hale getirebilirsin. Ama yok arkadaş ben uğraşamam, bu benim işimi görür dersen, ona da lafım yok

Güle güle kullan o halde

Hadi selametle...

__OsKi__ · 28 Aralık 2013

ugurturhal dedi ki:
Javascript kullanıcı etkileşimli bir dil olduğundan, sunucu tabanlı programlama dillerine ihtiyaç duymadan kullanılmaya olana...

Eff ne diyorum arkadaş ben, Tabiki uygulayabilirsin aşk olsun Şimdi istersen basit bir örnek yapalım.

HTML:

<html> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> // Burada son güncel jQuery dosyasını çağırdık. <script src="http://balupton.github.io/jquery-scrollto/lib/jquery-scrollto.js"></script> // Burada scroll to jquery dosyasını çağırdık. Ben online bir kaynak kullandım. Sen istersen yukarıda paylaştığın linkten dosyayı indirip direk sayfana ekleyebilirsin. <script> // işte burası kaydırmayı yapan alan :) Mantık biraz farklı şimdiye kadar görmemişsindir büyük ihtimalle. Neyse biraz sabret, anlatacam :) $(document).ready(function() { $(".kaydir").click(function(){ $('#'+this.summary).ScrollTo(); }); }); </script> <body> // Normal sayfamızın gövdesi <table width="10%" class="kaydir" summary="iki" height="100%" id="bir" bgColor="red" style="cursor:pointer;"> // Tablo 1 <th>Aşağı ?</th> </table> <table width="10%" class="kaydir" summary="bir" height="100%" id="iki" bgColor="blue" style="cursor:pointer;"> // Tablo 2 <th>Yukarı ?</th> </table> </body> </html> // Sonuç

Öncelikle kodun demosu burada http://jsfiddle.net/ay8Zt/

Şimdi yaptığımızı anlatalım. Önce jQuery dosyasını sayfaya ekledik.
Ardından ScrollTo fonksiyonunu içeren js dosyasını sayfaya ekledik.
Script kodumuzu yazdık. Kodun mantığı şu;

document ready kısmı sayfayı tarar.
(.kaydir).click kısmı, "kaydir" class' ına sahip (. olduğu için class, # olsaydı "id" olacaktı) nesneye tıklanması durumunda aktif olacak fonksiyonu içeriyor.
$('#'+this.summary).ScrollTo(); bu alan ise, tıklanan nesnenin summary değerini alıp, o id' ye sahip nesneye yönlendiriyor. Bir nevi dolaylı adresleme

Şimdi burada 2 tablo var.
1. tabloda summary="iki", id="bir"
2. tabloda summary="bir", id="iki"

dolayısıyla 1. tabloya tıklandığında kod şuna dönüşüyor;
$('#'+this.summary).ScrollTo();
this.summary "iki" verisini alacağından;
$('#iki").ScrollTo(); // Yani "iki" id' sine sahip nesneye kadar sayfayı kaydır.

ardından 2. tabloya tıklandığında, 2. tablonun summary değeri esas alınacağından;
$('#'+this.summary).ScrollTo();
this.summary "bir" verisini alacağından;
$('#bir").ScrollTo(); // Yani "bir" id' sine sahip nesneye kadar sayfayı kaydır.

Burada sadece yukarı ya da sadece aşağı mantığını da kullanabilirsin. Ben bilerek böyle bir fonksiyon yazdım. Böylece sayfada istediğin kadar nesneye tek bir fonksiyon ile kaydırma yapabilirsin. Yeter ki tıkladığın nesnedeki "summary" verisi, gitmek isteyeceğin nesneye ait "id" bilgisini içersin.

Şimdi bunun bir de onClick olan versiyonu mevcut. Bunu bilerek yazmadım ki örneklere bakarak sen yaz diye Biraz gıcıkça ama olsun, en iyi öğrenme, uygulama metodudur. Şimdi sen diyeceksin ki, e arkadaş bu benim işimi görüyor, diğerini yazmakla niye uğraşayım ben? İşte burada ufak bir hile mevcut (bilerek yapılmış). Table haricinde kullanacağın nesnelerde bu kaydırma işlevi çalışmayacaktır. Sebebini araştıra araştıra bulabilir, hatta sonuca ulaştığında, bu fonksiyonu div' lere, resimlere ya da herhangi bir nesneye uygun hale getirebilirsin. Ama yok arkadaş ben uğraşamam, bu benim işimi görür dersen, ona da lafım yok Güle güle kullan o halde

Hadi selametle...

Çok teşekkür ederim hocam uğraşmıssınız anlatmışsınız uzun uzun.

jQuery ile sayfayı otomatik aşağı kaydırmak. Yardım!

OsKi

Öğrenci

OsKi

Öğrenci

ugurturhal

Asistan

OsKi

Öğrenci

Benzer konular

SDN Haberleri

Son mesajlar

Forum istatistikleri

Sosyal ağlar

jQuery ile sayfayı otomatik aşağı kaydırmak. Yardım!

__OsKi__

Öğrenci

__OsKi__

Öğrenci

ugurturhal

Asistan

__OsKi__

Öğrenci

Benzer konular

SDN Haberleri

Son mesajlar

OsKi

OsKi

OsKi