Jquery derslerimize devam ediyoruz.Bu desimizde
.position() methodunu işleyecez.Position sayfadaki her hangi bir objenin top veya left değerlerini almamıza yarıyo.
$(".alan").position()
Bu şekilde position değerlerini alıyo.Position değerlerini aldı şimdi biz top yani yukardan yüksekliği almak istiyoruz.
var pos=$(".alan").position().top;
Bu şekilde top değerini alıyoruz.Left içinse şu şekilde.
var pos=$(".alan").position().left;
Bu şekilde de lefti alıyoruz.Aldığımız değerleri pos adlı değişkece atadık.Artık eriştiğimiz bu değerlerle işlem yapabiliriz.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
var pos=($(".alan").position().top)-($(window).height()/2);
$("body").animate({scrollTop : pos},500);
});
</script>
<style type="text/css">
.ust{height:2000px;}
.alt{height:2000px;}
</style>
</head>
<body>
<div class="ust"></div>
<div class="alan">cArleone</div>
<div class="alt"></div>
</body>
</html>
Yukardaki örnekte alan calsına sahip objenin top değerini alıp,o değerden pencere boyutunun yarısını çıkardık.Sebebi tam ortalanması için.Sonrada scroll aşağı kaydırdık.Böylelikle objemize erişip tam ortaladık.