Cara Membuat Efek Scrolling yang Smooth

Share:

Hello Worlds! Seringkali kita menemukan website-website yang memiliki tombol yang ketika diklik akan scrolling menuju ke bagian yang paling atas, tombol ini biasa disebut dengan back to top. Tombol ini berguna untuk memudahkan scroll layar ke bagian yang paling atas tanpa repot memutar tombol scroll pada mouse berkali-kali. Hanya dengan sekali klik, layar sudah berada di bagian teratas pada suatu laman.

Untuk caranya yang simpel, kita bisa menggunakan elemen Anchor untuk mengarahkan ke suatu elemen. Seperti contoh berikut.

<a href="#atas">Kembali ke Atas</a>

Script di atas, jika tulisan Kembali ke Atas diklik, maka layar Anda akan mengarahkan ke suatu elemen yang memiliki ID #atas. Tetapi, jika Anda hanya menggunakan script Anchor, tidak ada efek animasinya, seperti efek scrolling seperti menggerakkan mousewheel. Nah, dengan bantuan jQuery dan plugin-nya Anda bisa membuat efek scrolling dengan animasi seperti menarik scrollbar di sebelah kanan. Berikut adalah caranya.

1. Pertama, Anda masukkan dahulu script dibawah ini ke dalam tag <head>......</head>
<script type="text/javascript" src="http://belajarnge.web.id/alat/jquery-3.1.1.js"></script>
<script type="text/javascript" src="http://belajarnge.web.id/alat/jquery.smooth-scroll.js"></script>
<script type="text/javascript" src="http://belajarnge.web.id/alat/jquery.smooth-scroll.min.js"></script>

2. Setelah itu, buatlah script.js dan tulis kode di bawah ini dan include-kan seperti script di atas
$("document").ready(function() {
     $("#tombol").click(function() {
          $.smoothScroll({ scrollTarget: "#keTujuan", });
     });
});
Keterangan :
#tombol merupakan ID dari suatu elemen yang fungsinya untuk diklik agar menuju ke bagian tujuan
#keTujuan adalah ID dari elemen yang menjadi tujuan scrolling.

3. Simpan dan Uji coba.

Jika tidak bekerja dengan benar, mungkin ada penulisan yang keliru atau ID tujuan yang salah. Atau kurang tanda petiknya, atau juga bisa hal yang lain. Jika Anda ingin mencobanya secara offline, Anda bisa menyalin/mengunduhnya terlebih dahulu. Untuk demonya, Anda bisa lihat ke Pisgore atau Jasa Kupas Mangga. Semoga bermanfaat. Salam Koding!

No comments