Jquery Ders-31 scrollTop() ve scrollLeft() Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Ders-31 scrollTop() ve scrollLeft() Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3759)
RAPOR ET
Jquery eğitim serimize devam ediyoruz.Bu derste .scrollTop() ve .scrollLeft() kodlarını işleyeceğiz.Öncelikle işlevinde başlayalım.Sayfada scrollu aşağı yukarı veya sağa sola oynatmamıza yarar.Scroll bulunan tün elemanlarda bu işlemi yapabiliriz.

1-scrollTop


$("body").scrollTop(100)

ScrollTopun basitçe kullanımı bu şekildedir.Scroll en üstteyken değeri 0 dır.Aşağı indikçe değeri artar.
var p=$("body").scrollTop();

Diyerek o anki scrollTopun pozisyonunu bulabiliriz.

1-scrollLeft


$("body").scrollLeft(25)

ScrollLeftin kullanımı topunkine çok benzer.Scroll en soldayken değeri 0 dır.Sağa gittikçe değeri artar.
var p=$("body").scrollLeft();

Bu şekilde de o anki scrollLeftin bulunduğu pozisyonu alabiliriz.

Genel örnek :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#a").click(function(){//aşağı in butonuna basılırsa
var y=$(document).height()-$(window).height();//Scrollun en dip noktasını buluyoruz
$("body").scrollTop(y);//En aşağı yolluyoruz
})

$("#y").click(function(){//yukar çık butonuna basılırsa
$("body").scrollTop(0);//en yukarı yolla
})
})
</script>
</head>
<body>

<button id="a">Aşağı in</button>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<button id="y">Yukarı çık</button>

</body>
</html>


Yukarıdaki örnekte aşağı in ve yukarı çık butonu bulunmakta.Butonlara basıldığında aşağı yukarı yolluyoruz.




davmaneydi
davmaneydi 2 Yıl Önce Cevaplandı
bunun yavaşça inmesi için neyapmalıyız?
sorun çözüldü:
	$(function(){
$("#y").click(function(){

$("html, body").animate({scrollTop:"0"},5000);

})
})



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol