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.
UstaDerslik
