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 : <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>soft Scroll dengan JQuery</title> <link rel="stylesheet" href="bootstrap.min.css"> <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;} </head> </style>
<body> <header> <div class="row"> <div class="col-sm-6"> <h1>soft Scrolling dengan JQuery</h1> <div class="col-sm-6"> <nav> <ul> href="#home">home</a></li> href="#about">about</a></li> href="#project">project</a></li> href="#contact">contact Us</a></li> </ul> </nav> </header> <main> <section id="home"> <h2>home</h2> adipisicing elit. Fugiat, delectus, similique, officia, nisi nam hic repudiandae repellendus a laudantium culpa adipisci accusamus aperiam ipsam qui tempore ab facere excepturi neque! <div>quidem, molestias, quibusdam, expedita animi accusantium fugiat laboriosam placeat rerum maxime soluta officiis dolor repudiandae eligendi quia in necessitatibus aut debitis asperiores ratione numquam nulla minus sit impedit eaque magnam! <section id="about"> <h2>about</h2> adipisicing elit. Dolores, impedit, unde, ducimus ab ipsam ipsa dignissimos amet culpa tempora reprehenderit tempore odit consequuntur totam accusantium quis. Amet, nulla repellendus voluptate. <div>nesciunt, neque, eveniet odio corrupti aliquam inventore earum officiis laboriosam veritatis omnis quaerat fuga optio asperiores unde non odit corporis! Dolorem, temporibus deleniti consectetur dolor aperiam a officia consequatur ducimus! <div>perferendis, velit, soluta, asperiores,
ratione harum tempore inventore quis aliquam enim optio nihil repudiandae dolorum dignissimos dolor hic culpa laboriosam. Ad, nostrum, ab sapiente veritatis soluta inventore quam accusamus sed! <section id="project"> <h2>project</h2> adipisicing elit. Similique, earum architecto cupiditate vitae expedita voluptate asperiores quasi numquam eos! Voluptate eveniet quibusdam excepturi saepe obcaecati et aliquam nesciunt facilis suscipit! <div>eum, aspernatur officia eius labore nisi vel placeat dolores porro veritatis nihil eos dicta non autem laborum itaque ipsum accusantium nostrum harum est cupiditate sit suscipit pariatur quos temporibus debitis! <div>iusto, minus voluptate veniam atque error! Ex, unde, excepturi, magni quasi facere officia illum quia consequatur quidem cupiditate mollitia corporis voluptatem quisquam repudiandae quae voluptate possimus ducimus fuga amet eius? <div>perferendis, eum eius odit ullam explicabo facilis reiciendis! Consectetur, quia, eveniet laudantium repudiandae veniam accusamus asperiores expedita odio necessitatibus non iusto doloremque incidunt aperiam. Sit, consequuntur delectus itaque esse nesciunt. <section id="contact"> <h2>contact Us</h2> adipisicing elit. Sint, beatae sunt distinctio deleniti laborum odio! Tenetur quo magnam quae ad? Facere autem dignissimos nulla veritatis in doloribus voluptate eos temporibus. <div>ex, quam, nemo, assumenda quo dolorem soluta atque iusto doloremque nesciunt et consequatur laudantium beatae suscipit accusamus quod ipsam officia eligendi laboriosam! Nulla, quos reiciendis quis consequatur similique architecto recusandae. <div>officia, unde, consequatur, animi ad voluptate non quasi voluptatum distinctio aliquid soluta veritatis eum reiciendis nihil nobis natus ipsum adipisci minus numquam hic impedit. Aliquam, voluptatem doloribus similique repudiandae ipsa. </main> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function(){ });
</script> </body> </html> 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 <a>. Tapi nggak semua tag <a> yang akan dijadikan pemicu,, hanya tag <a> 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 <a> 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 <header> 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