Memahami JQuery ScrollTop, ScrollLeft, Window Width dan Window Height

Terkadang ketika kita meletakkan elemen html di posisi paling atas maupun di tengah-tengah window, kode yang kita tuliskan sudah sesuai, namun terkadang kita lupa menambahkan posisi scrollbar, sehingga ketika halamannya lebih panjang atau lebih lebar dari window, element tersebut posisinya berubah, oleh karena itu pada kesempatan kali ini kita akan membahas mengenai posisi scrollbar menggunakan library jQuery, disamping juga dibahas mengenai window width dan height serta contoh bagaimana meletakkan element di tengah-tengah window.

1. scrollTop() dan scrollLeft()

Kedua fungsi tersebut sering digunakan ketika kita akan membuat element yang posisinya absolute, misal selalu ditengah-tengah window, diatas, pojok kanan atas, pojok kiri bawah, dan sebagainya

Dalam jQuery, posisi scrollbar didefiniskan dalam dua fungsi yaitu scrollTop() untuk posisi vertikal dan scrollLeft() untuk posisi horizontal, nilai yang dihasilkan dari fungsi ini relatif terhadap element parentnya, pada contoh kali ini akan menggunakan window object. Untuk lebih jelasnya, misal saya membuka website http://shop.oreilly.com/category/browse-subjects/web-development/javascript.do, ketika ukuran browsernya saya kecilkan maka akan muncul scrollbar seperti gambar berikut:

Gambar 1.

kondisi sebenarnya dari apa yang tampak di browser adalah sebagianbagian dari keseluruhan halaman web, ketika kita scroll ke kanan dan kebawah, bagian atas yang tidak tampak itulah yang dimaksud scrollTop() dan sebelah kiri yang tidak tampak adalah scrollLeft, seperti tampak pada ilustrasi berikut ini:

Gambar 2.

2. Window Width dan Height

Ketika membuat element yang posisinya absolute terhadap dokumen, kedua properti ini tidak dapat diabaikan, karena juga mempengaruhi posisi element. Seperti tampak pada Gambar 2, window width adalah lebar window area di browser sedangkan window height merupakan tinggi area window di browser.

Dalam jQuery, window width ditulis menggunakan kode $(window).width(), sedangkan window height ditulis menggunakan kode: $(window).height()

3. Contoh: Meletakkan element di tengah window

Contoh yang pertama adalah meletakkan element di sebelah tengah atas window, seperti element A pada Gambar 2. Untuk meletakkan element diposisi tersebut, diperlukan CSS selector dengan property position, top dan left.

Untuk property position kita gunakan absolute, sedangkan untuk property top, karena berada di posisi paling atas, maka kita samakan dengan scrollTop() $(window).scrollTop();, sedangkan untuk property left kita hitung dengan cara ( (window width - lebar element) / 2 + scroll left ). Misal element A tadi berupa <div id="elm-a">A</div>, maka kode lengkapnya sebagai berikut:

var	$elm = $('#elm-a'),
	$window = $(window),
	win_w = $window.width(),
	elm_w = $elm.width(),
	top_pos	= $window.scrollTop(),
	left_pos= ( (win_w - elm_w) / 2 ) + $window.scrollLeft();
			
$elm.css({
			'position': 'absolute',
			'top': top_pos,
			'left': left_pos
		})
	.fadeIn('fast');

Contoh yang kedua adalah meletakkan element berada di tengah-tengah window, sebagaimana element B pada Gambar 2. Untuk property top kita hitung dengan cara ( (window height - tinggi element) / 2 + scroll top ), sedangkan property left, cara menghitungnya sama dengan contoh sebelumnya. Misal element B tadi berupa<div id="elm-b">B</div>, kode lengkapnya adalah:

var	$elm = $('#elm-b');
	$window = $(window),
	win_w = $window.width(),
	win_h = $window.height(),
	elm_h = $elm.height(),
	elm_w = $elm.width(),
	top_pos	= ( (win_h - elm_h) / 2 ) + $window.scrollTop(),
	left_pos= ( (win_w - elm_w) / 2 ) + $window.scrollLeft();
		
$elm.css({
		'position': 'absolute',
		'top': top_pos,
		'left': left_pos
	})
	.fadeIn('fast');

Selengkapnya
Demikian penjelasan dari bagaimana menampilkan element di tengah atas dokumen dan di tengah-tengah dokumen secara absolute, dengan sedikit penyesuaian, berikut kode lengkapnya:

	
	
	
	


	

		Element A Element B
	
	
Element A
	
Element B

atau dapat didownload disini

Klik button dibawah untuk melihat hasilnya:

Kode diatas belum mencakup event scroll dan resize, dimana ketika window di scroll atau diresize, element tetap berada di posisinya (tengah atas atau tengah-tengah dokumen), untuk lebih lengkapnya dapat mengunjungi halaman ini.

Demikian, tutorial mengenai scrollTop(), scrollLeft(), $(window).width() dan $(window).height() dalam jQuery, semoga dapat bermanfaat…