Membuat Tombol "Go To Top" dengan Efek Pantulan

Assalamu'alaikum Warahmatullahi Wabarakaatuh

Pas tadi siang kuliah, ada temen yang nanyain progress pembuatan web yang sedang saya rancang. Sambil liat-liatan web masing-masing, pandangan saya langsung tertuju pada Tombol "Go To Top" yang dipasang di web Dia.

Sambil tanya-tanya gimana cara bikinnya, saya coba praktek-in di web saya. Eh ternyata bagus juga dipasang di web saya. Karena setiap orang selalu ingin hal yang berbeda dari yang lain termasuk saya, jadi saya coba modifikasi supaya lebih khas dari punya nya temen saya.

Saya coba tambahin efek pantulan ketika tombol itu diklik, dan hasilnya taraaa... jadi lebih menarik dong tentunya.

Tanpa panjang lebar lagi, yo kita mulai tutorial nya :

1. Agan siapin dulu halaman HTML yang akan diisi fasilitas tombol "Go To Top" nantinya. Usahain isinya agak panjang ya biar nantinya bisa di scroll ke bawah.

2. Di bagian akhir script HTML, coba buat syntax link seperti ini :

<a href="#" class="ke-atas">Ke Atas</a>

3. Udah itu kita buat style CSS nya. Cari kode ini : </head> lalu ketikkan kode seperti ini di atasnya :

<style>.ke-atas{ position: fixed; bottom: 20px; right: 20px; padding: 20px 25px; color: #fff; background-color: #999; display:none;} .ke-atas:hover{ background-color: #ff0;}</style>

4. Panggil library jquery dengan mengetik kode seperti ini di bagian bawah HTML Agan :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.mi.js"></script>

5. Kemudian buat script Javascript-nya di bawahnya. Buat seperti ini : 

• <script>

•   $(document).ready(function() {
•     // tampilkan dan sembunyikan tombol
•     $(window).scroll(function() {
•       if($(this).scrollTop() > 250) {
•         $('.ke-atas').fadeIn(250);
•       } else {
•         $('.ke-atas').fadeOut(250);
•       }
•     });
• 
  
•     // Efek lambat ketika diklik
•     $('.ke-atas').click(function() {
•       event.preventDefault();
•       
•       $('html, body').animate({scrollTop: 0}, 800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50);
•     });
•   });
• </script>

Selesai ... !!!

Nah, sisanya tinggal testing, silakan reload halaman yang Agan buat barusan. Menarik kan fasilitas tombol "Go To Top" nya ?

Ya udah deh, udah pada bisa ini kan, he

Terima kasih ya udah berkunjung ke sini, mudah-mudahan bermanfaat. Terus berkarya menciptakan hal-hal yang berguna.Wassalamu'alaikum Warahmatullahi Wabarakaatuh

sumber inspirasi :

1. Teman sekelas
2. http://blog.kangismet.net/