Membuat Smooth Scrolling dalam 1 halaman dengan JQuery Oleh: Christian Rosandhy

Segala sesuatu yang smooth itu tentunya asik dong ya? Begitu juga dengan website kita.. Kita bisa bikin animasi scroll dalam 1 halaman yang sama dengan smooth pakai bantuan JQuery.. Silakan disimak~

Salam jagocoding,, seperti biasa kali ini saya ingin berbagi tutorial lagi.. Kali ini kita akan membahas salah satu teknik JQuery yaitu animasi smooth scrolling. JQuery sudah menyediakan banyak fungsi yang sangat menarik, dan salah satunya adalah animasi scrolling.. Langsung aja ya~ Karena kita akan bekerja dengan JQuery, jangan lupa download file JQuerynya dulu ya (bisa didownload di https://jquery.com/download/, atau dipanggil di HTML pake CDN),, Ah, sama di project saya kali ini juga saya pakai bootstrap,, sekedar buat layouting gridnya aja kok.. Sekalian diinclude juga di project kita ya.. Dengan asumsi file JS JQuery dan CSS Bootstrap sudah didownload, file project awal kita mulai seperti ini : <meta charset="UTF-8"> <style> /*CSS For This Project*/ *{margin:0px auto;} html,body{height:100%; min-height:100%;} header{background:#282828; color:#e9e9e9; position:fixed; width:100%; margin-bottom:50px; z-index:2;} header h1{line-height:45px; margin:auto; padding:0px; font-size:30px;} header nav ul{display:block; list-style:none; text-align:right;} header nav ul li{display:inline-block;} header nav ul li a{display:block; line-height:45px; color:#5ea5e9; line-height:45px; padding:0px 10px; font-size:18px;} header nav ul li a:hover{color:#fff; text-decoration:none;} main{position:relative; height:100%; top:45px; /*spy tidak ketutupan header*/} section{min-height:100%; position:relative;}

Soft Scrolling dengan JQuery

<main> <section id="home"> <section id="about"> <section id="project"> <section id="contact"> <script type="text/javascript" src="jquery-1.10.2.min.js"> <script type="text/javascript"> $(function(){ });

Dengan mengikuti script diatas, hasilnya sekarang jadi seperti ini :

Yak, layout yang saya pakai kali ini adalah Layout Fix Header.. Sempat juga saya bikin tutornya dulu di http://jagocoding.com/tutorial/499/Membuat_Layout_Header_Diam_di_Tempat_Fix_Header. Kalau kita klik menu-menunya, sudah mau pindah sesuai tempat yang diinginkan sih, cuma gerakannya terlalu kasar.. Nah, disinilai teknik smooth scrolling akan kita gunakan.. Objek pemicu yang akan kita pakai dalam hal ini adalah tag . Tapi nggak semua tag yang akan dijadikan pemicu,, hanya tag yang mempunyai atribut href bernilai hash (hash itu yang ada simbol #nya itu lho~). Jadi kita di bagian $(function) kita isi seperti ini :

$(function(){ //fungsi dibawah hanya berjalan untuk semua tag yang diawali (^) dengan hash (#) $('a[href^="#"]').on('click', function(e){ });

}); Selanjutnya kita buat variabel target untuk menampung nama hash target animasi scroll kita.

//masukkan ke dalam kurung kurawalnya $(a[href^])...... $target = $(this.hash);

Nah, yang terakhir, kita akan menggunakan fungsi animate(). Parameternya adalah posisi akhir animasinya dimana, durasinya berapa, efek animasinya (easing)nya apa, dan terakhir fungsi yang akan dipanggil setelah animasi dijalankan. Fungsi animate() ini akan kita terapkan ke html dan body. //masukkan baris coding ini dibawahnya $target ...... $jarak = 0; $('html, body').stop().animate( { 'scrollTop' : $target.offset().top - $jarak }, 500, //durasi dalam milisekon 'swing', //efek transisi (opsi : swing / linear) function(){ window.location.hash = target; } ); Yak,, sampai disini sudah bisa dijalankan lho.. Coba deh.. Sayangnya, tinggal ada sedikit masalah aja sih.. Scrollnya udah mau smooth, lokasinya juga tepat, tapi karena header kita posisinya fixed, ada jarak bagian konten yang ketutupan header..

Untuk mengatasi itu,, di coding jquery diatas sudah saya sediakan variabel $jarak. variabel $jarak itu bisa kita isi sesuka hati kita, disesuaikan dengan seberapa besar selisih jarak yang seharusnya. Karena layer

tersebut saya beri tinggi 45px, maka kita bisa isikan nilai di variabel $jarak sebesar 45 juga. Kalau sampai disini bisa diikuti dengan lancar, seharusnya project ini sudah selesai persis seperti di halaman demo ini ( http://tianrosandhy.com/demo/soft_scroll ). Sekian saja tutorial saya kali ini~ terima kasih~ CMIIW :3

Tentang Penulis Christian Rosandhy