Assalamu’alaikum Warahmatullahi Wabarakaatuh,
Halo Sobat Mas Rizky, berjumpa lagi ya di Website yang sama, dalam kesempatan kali ini admin Masrizky.web.id akan berbagi Cara Membuat Tombol Back to Top dengan Efek Bounce.
Membuat tombol “Back to Top” dengan efek bounce adalah cara yang efektif untuk meningkatkan pengalaman pengguna di sebuah situs web.
Cara Membuat Tombol Back to Top dengan Efek Bounce
Tombol ini memudahkan pengguna untuk kembali ke bagian atas halaman tanpa harus menggulir naik secara manual. Dalam panduan ini, kita akan menggunakan HTML, CSS, dan JavaScript untuk membuat tombol tersebut dengan efek bounce yang menarik.
Pertama, kita akan membuat tombol “Back to Top” dalam file HTML Anda. Tambahkan kode berikut di dalam tag <body>:
Sebelum melangkah pada tutorial, saya mengucapkan terimakasih kepada pembaca blog sederhana yang saya kelola ini, karena dengan berbagai pertanyaan melalui whatsapps saya memunculkan ide untuk membuat artike baru.
Lanjut kepada tutorial ya sob… Apa sih sebenarnya efek bounce itu? bounce artinya memantul, jadi back to top setelah discroll akan ada sedikit efek pantulan. Untuk menerapkannya, silahkan ikuti langkah mudahnya pada di bawah ini :
Langkah 1 : Simpan kode jQuery di atas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>lewati langkah ini apabila di blog kamu sudah ada. Versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dan lain-lain.
Langkah 2 : Simpan kode ini masih di atas </head>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>Langkah 3 : Buat widget baru HTML/JavaScript, simpan kode ini :
<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9T-erWuNlvwhJCzQQZx8KJiQf2ROCf_Wd5vK_slb6Jje2rGuUvDHaFPulE7GmULW5rN6H_0KlEQiGk_oTvHZP7Sv3ybfokRi2mtH2lnkMowY3R59DFqZJE512QU-FsGqSgzV0NSLf2Hg/s1600/arrow-up_basic_blue.png'/></div>Pada tampilan tombol dengan code di atas menggunakan fade in / fade out (muncul perlahan), apabila tombol ingin dimunculkan dari bawah seperti blog saya ini, ganti kode pada langkah 2 dengan kode ini :
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat tombol “Back to Top” dengan efek bounce.
sangat bermanfaat bagi para IT terimakasih mas Rizky Kharisma Semarang sudah membuat berbagai tutorial orang" IT semoga sehat selalu dan dipermudah segala urusanya amiin. salam dari guru desain sumatera utara
Alhamdulilah mas jika bermanfaat semoga menyukai karya karya saya ya. salam balik mas