Tutorial Cara Membuat Multi Scroll Page w/ Jquery

Jquery.com

Artikel kali ini sebenarnya tidak jauh berbeda dengan artikel saya Tips Sederhana : Membuat Link Back To Top, hanya saja tutorial kali ini menggunakan Jquery dan memberikan sentuhan lembut ketika di klik. Dan bukan hanya untuk back to top saja yang bisa di beri efek seperti itu, oleh karena itu saya menulis pada judulnya Multi Scroll Page.

Mas ardianzzz sebenarnya sudah menulis tehnik ini di kolom komentar disini, tapi agak berbeda codingnya dengan yang akan saya tulis sekarang. Oia, untuk contoh scroll page ini, teman-teman bisa mencoba link ini. Bagaimana ? Tertarik ? Kalau tertarik kita lanjut

1. Silahkan anda download terlebih dahulu script jquery.js
2. Setelah anda download, sekarang anda harus mengakses cpanel blog anda. Upload jquery.js tadi ke dalam folder template yang anda gunakan sekarang.
3. Setelah itu anda buka file header.php, copykan script di bawah ini tepat sebelum tag
   < / head > (tanpa spasi)

   <script language="JavaScript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.js"></script>

4. Kemudian anda copy juga script di bawah ini, di bawah script di atas yang baru saja anda copykan.

   <script type='text/javascript'>
   $(document).ready(function(){
   	$(".scroll").click(function(event){
   		event.preventDefault();
   		var full_url = this.href;
   		var parts = full_url.split("#");
   		var trgt = parts[1];
   		var target_offset = $("#"+trgt).offset();
   		var target_top = target_offset.top;
   		$('html, body').animate({scrollTop:target_top}, 800);
   	});
   });
   </script>

   Script ini artinya, setiap anchor text akan menghasilkan efek smooth atau lembut ketika di klik apabila di beri tambahan class="scroll"

5. Contoh penggunaannya, sekarang anda buka file footer.php, biasanya di setiap template ada tulisan nama pembuat templatenya tersebut, tepat di sebelah nama pembuat template itu anda copy kan script di bawah ini.

   <a href="#top" class="scroll">Back To Top</a>

   href="#top" merupakan lokasi yang dituju dari anchor text tersebut.

6. Sekarang anda buka kembali file header.php, copy script di bawah tepat setelah tag
   < body >(tanpa spasi)

   <span id="top"></span>

   Refresh halaman blog anda, kemudian anda coba klik link Back To Top yang ada di footer blog anda.

Berhasil ? Nah, bila sudah berhasil anda tinggal memberi sedikit style agar lebih rapi. Anda bisa menggunakan tehnik ini dimana saja, seperti misalkan saya menggunakannya pada tombol Go To Footer yang ada di sebelah kanan atas halaman blog saya. Selamat mencoba !

Referensi :
WebDevTuts
Bavotasan