Cara Membuat Tombol Back To Top Dengan Efek Memantul

Cara Membuat Tombol Back To Top Dengan Efek Memantul - Para pembaca blog biasanya sedikit risih apabila blog yang dibacanya memiliki artikel yang panjang-panjang, belum lagi komentarnya, bisa capek kalau harus scroll dari atas ke bawah. Nah untuk mengatasi masalah tersebut, anda bisa menggunakan Back To Top yang memudahkan para pembaca untuk kembali ke header page dengan seketika.

Tadi saya jalan-jalan di blognya Kang Ismet, saya menemukan tutorial ini. Pada postingan ini, Rinata akan membagikan cara membuat tombol back to top dengan efek memantul. Apa sih efek memantul itu? Efek memantul itu sebenarnya hanya sedikit efek pantulan saat menekan tombol Back To Top. Bila anda ingin memasang tombol back to top, silahkan ikuti beberapa langkah mudah berikut :

Langkah 1 : Masuk ke Dashboard > Template > Edit HTML > Simpan kode jQuery di atas kode </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 anda sudah ada jQuery di blog anda. Versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.

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 : Masuk ke Dashboard > Tata Letak > 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/AVvXsEiIJ6OyLn6dEyNbNPD4F6Vn8OJ9G6haDCGK3_Uo-4eJIfNw5gOzoGSjRHB7Phdmxl4zw0OZG_Y8ZKy3g7ZENobYdxVV8mrEUNuCmZxNiFUg6XZi0GrKkLrHRYcFepBQehIsV_f6J_alAie5/s1600/arrow-up_basic_blue.png'/></div>

Tampilan tombol dengan kode di atas menggunakan fitur muncul perlahan, apabila tombol ingin muncul dari bawah, 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>

Nah, itulah tutorial Cara Membuat Tombol Back To Top dengan Efek Memantul. Bila anda memiliki tutorial lainnya, silahkan komentar di kolom dibawah. Terima Kasih.

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Blog Rinata. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Blog Rinata dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Unknown pada tanggal Kamis, 27 Februari 2014