Tutorial jQuery : Membuat Link Scrool Back to Top and Down Dengan jQuery

Tak terasa, jam di laptop sudah memnunjukkan pukul 03.00 pagi waktu Bali. Saya masih saja sibuk di depan laptop, melakukan testing aplikasi KRS yang akan dipakai senin depan di kampus. Padahal nanti siang, saya harus balik ke pulau seberang dan dijamin bakal ngantuk banget di perjalanan. Mau tidur tapi gak bisa, gara-gara anjing saya meraung-raung gak jelas di halaman rumah. Jadi merinding juga, mengingat ada isu celuluk (sejenis makhluk jadi-jadian, perwujudan ilmu leak) yang katanya kelayapan dari kemarin malam. Sambil nunggu pagi dan daripada nganggur gak jelas, mending posting sedikit trik tentang jQuery di blog kesayangan saya ini. Nah, kali ini saya akan memberikan sedikit trik untuk membuat Link Scrool Back to Top and Down Dengan jQuery. “Apaan tuh link Scrool Back to Top and Down…????”. Contohnya bisa dilihat di bawah postingan ini, tepatnya setelah form komentar. Kebetulan trik ini saya gunakan juga pada aplikasi KRS yang tengah saya kerjakan. OK deh, kita langsung aja ke cara pembuatannya.

1. Lagi-lagi kali ini saya menggunakan library javascript jQuery, bagi yang belum punya silahkan download di http://jquery.com.

2. Buat sebuah dokumen baru, entah itu dengan format file html atau php. Dan ketikkan syntax di bawah ini :

<script type="application/javascript" src="jquery.js"></script>
<script>
$(function() {
        var $halaman = $('#page');

	$('a[href=#down]').click(
		function (e) {
			$('html, body').animate({scrollTop: $halaman.height()}, 2500);
		}
	);
	$('a[href=#top]').click(
		function (e) {
			$('html, body').animate({scrollTop: '0px'}, 2500);
		}
	);
 });
</script>

3. Syntax di atas untuk membuat sebuah event untuk menggulung halaman ke atas (top) dan untuk menggulung halaman ke bawah (down). Angka 2500, berfungsi untuk mengatur kecepatan scrooling terhadap event, dan ini bisa diatur sesuai keinginan masing-masing.

        var $halaman = $('#page');

Dan potingan variabel di atas, berfungsi untuk memilih bagian elemen html yang akan diberikan event di atas. Contohnya seperti ini :

<div id="page">
	<div id="header"></div>
	<div id="menu">
		<ul>
		<li>Beranda</li>
		<li>Profil</li>
		<li>Portfolio</li>
		</ul>
	</div>
	<div id="content">
		Selamat Datang
	</div>
	<div id="footer"></div>
</div>

Jadi bagian terluar yang akan dipilih untuk diberikan event scrool to down.

4. Dan terakhir, kita perlu membuat sebuah link untuk menjalankan event-event di atas. Untuk melihat efeknya, event yang berfungsi untuk menggulung halaman ke bawah ditaruh di atas dan event yang berfungsi untuk menggulung halaman ke atas diatruh di bawah.

<div id="page">
	<div id="header"><a href="#down">Isi Komentar di Bawah Postingan</a></div>
	<div id="menu">
		<ul>
		<li>Beranda</li>
		<li>Profil</li>
		<li>Portfolio</li>
		</ul>
	</div>
	<div id="content">
		Selamat Datang
	</div>
	<div id="footer"><a href="#top">Kembali ke Atas</a></div>
</div>

5. Kode selengkapnya kira-kira seperti di bawah ini :

<script type="application/javascript" src="jquery.js"></script>
<script>
$(function() {
        var $halaman = $('#page');

	$('a[href=#down]').click(
		function (e) {
			$('html, body').animate({scrollTop: $halaman.height()}, 2500);
		}
	);
	$('a[href=#top]').click(
		function (e) {
			$('html, body').animate({scrollTop: '0px'}, 2500);
		}
	);
 });
</script>
<div id="page">
	<div id="header"><a href="#down">Isi Komentar di Bawah Postingan</a></div>
	<div id="menu">
		<ul>
		<li>Beranda</li>
		<li>Profil</li>
		<li>Portfolio</li>
		</ul>
	</div>
	<div id="content">
		Selamat Datang
	</div>
	<div id="footer"><a href="#top">Kembali ke Atas</a></div>
</div>

Gampang kan cara pembuatannya…??? Kode diatas bisa diterapkan dengan mudah dimana saja, entah itu pada web yang dibuat sendiri atau pada CMS yang sudah jadi seperti yang saya terapkan pada blog saya yang menggunakan WordPress ini. OK deh, semoga sedikit trik dari saya ini bisa bermanfaat untuk rekan-rekan.

Happy Blogging and Keep Coding

Cheerrrsss….!!!!