Membuat Page Scroll Menggunakan Jquery

Pada Tips dan Trik kali ini kita akan mencoba membuat page scroll sederhana menggunakan jquery. Ini akan membantu memperindah ketika kita beralih dari halaman satu ke halaman yang lain.

Secara sederhana jquery disini hanya menggantikan default dari browser ketika menangani perpindahan dari satu halaman ke halaman lainya ketika link dengan nilai href mengandung hash (#) diklik, maka jquery disini berfungsi menghidupkan halaman untuk bagian tersebut.
Kita dapat menggunakan link sederhana seperti back-to-top atau yang lebih kompleks. Salah satu manfaat menggunakan jquery kita dapat menyesuaikan kecepatan animasi perpindahan antar halaman.

HTML
Langkah pertama kita akan mulai dengan membuat struktur HTML-nya, dan karena kita akan membuat 5 halaman, maka kita berikan nilai href pada masing-masing halaman. Berikut kurang lebih kerangka HTML nya.

<nav id="navigation-menu">
    <ul>
	<li><a href="#section-1">Halaman 1</a></li>
	<li><a href="#section-2">Halaman 2</a></li>
	<li><a href="#section-3">Halaman 3</a></li>
	<li><a href="#section-4">Halaman 4</a></li>
	<li><a href="#section-5">Halaman 5</a></li>
    </ul>
</nav>
	
<div id="content">
    <section id="section-1">
	<div class="content">Target Halaman 1 (section 1)</div>
    </section>
    <section id="section-2">
	<div class="content">Target Halaman 2 (section 2)</div>
    </section>
    <section id="section-3">
	<div class="content">Target Halaman 3 (section 3)</div>
    </section>
    <section id="section-4">
	<div class="content">Target Halaman 4 (section 4)</div>
    </section>
    <section id="section-5">
	<div class="content">Target Halaman 5 (section 5)</div>
    </section>
</div>

Jangan lupa untuk bagian head dari HTML kita beri tag meta viewport agar menjadi responsive seperti berikut:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

CSS
Kode CSS untuk menangani ukuran layar dibawah 1140px. Untuk kode CSS yang lebih lengkap Anda bisa langsung download pada link yang kami sediakan dibawah artikel.

@media only screen and (min-width: 1140px){
	
	header, .content, footer, 
	.horizontal-layout header, .horizontal-layout .content, .horizontal-layout footer,
	.auto-layout .content{
		padding-right: 3em;
		padding-left: 3em;
	}
	
	.horizontal-layout header h1{
		display: block;
	}
	
	.auto-layout header h1{
		margin-left: 0;
	}
	
	#navigation-menu{
		font-size: 1em;
		top: 1.55em;
	}
	
	.horizontal-layout #navigation-menu, .auto-layout #navigation-menu{
		right: 3em;
		left: auto;
		top: 1.55em;
	}
	
	#navigation-menu ul{
		-moz-border-radius: 17px; -webkit-border-radius: 17px; border-radius: 17px;
	}
	
	#navigation-menu li{
		float: left;
		margin: 3px 5px;
	}
	
	#navigation-menu a{
		-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
	}	
}

Sampai disini sebenarnya layout sudah dapat berpindah dari satu halaman ke halaman lain. Akan tetapi belum ada efek animasi dalam perpindahan tersebut. Maka kita perlu memasukan script jquery ke dalam file HTML kita.

jQuery
Jquery disini bekerja hanya dengan menghubungkan link dalam bentuk a href="#id" Link, untuk bagian dalam dokumen dalam bentuk div id="id" Target. Dengan mengklik link akan menampilkan halaman pada bagian terhubung (target link).

Langkah terakhir adalah memasukan script jquery sebelum penutup tag body seperti berikut:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.PageScroll2id.js"></script>
	
<script>
	(function($){
		$(window).load(function(){
			$("#navigation-menu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({
				highlightSelector:"#navigation-menu a"
			});
							
			$("a[rel='next']").click(function(e){
				e.preventDefault();
				var to=$(this).parent().parent("section").next().attr("id");
				$.mPageScroll2id("scrollTo",to);
			});				
		});
	})(jQuery);
</script>

Sampai disini kita sudah bisa melihat perbedaan setelah memasukan script jquery. Sedikit banyak pasti kita sudah tau konsep penggunaan plugin jquery dengan melakukan praktek diatas.

Sekian Tips dan Trik kali ini, semoga bermanfaat.

Berikut link demo dan source code lengkapnya yang bisa di download.
DEMO | DOWNLOAD CODE

You may also like...

4 Responses

  1. zeze says:

    nice gan bookmark 🙂

  2. kak dolop says:

    makasih nih mas, tutorialnya sangat mudah untk dimengerti 🙂

  3. Rizuki says:

    thanks gan, tutornya gampang dimengerti 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *