Cara Membuat tombol Back To Top

Oleh Syafdillah

26 Maret 2016

Tombol Back To Top atau tombol kembali ke atas, adalah sebuah fasilitas yang bisa kita pasang pada halaman blog atau web dalam bentuk sebuah tombol yang berfungsi sebagai fasilitas untuk kembali ke halaman atas atau menggulung layar ke atas secara otomatis.

Pada dasarnya fungsi back to top untuk memudahkan pembaca ke atas atau ke bawah pada halaman blog atau web dengan cepat tanpa merepotkan si pembaca sama sekali. Mungkin kurang lebih seperti itu fungsi ini diciptakan.

Buat yang ingin mencobanya bisa mengikuti langkah-langkah berikut ini :

1. Login ke Blogger lalu pilih blog sobat yang akan dipakai untuk percobaan memasang widget back to top ini.
2. Sudah dipilih blognya, lalu pilih "TEMPLATE" dan "EDIT HTML" kemudian copy kode CSS back to top ini di atas kode ]]></b:skin> dan Simpan.
   

   #BounceToTop {color:#555;background:#fff;text-align:center;position:fixed;bottom:50%;right:-125px;cursor:pointer;font-size:19px;font-weight:600;padding:0 12px;transition:all 400ms ease-in-out;border:1px solid #ddd;z-index:9;height:45px;line-height:45px}

3. Selanjutnya cari kode </body> lalu copy kode Javascript di bawah ini di atas kode </body>
   

   <script type='text/javascript'>
     $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').css({'right':'0'}); } else { $('#BounceToTop').css({'right':'-125px'}); } });
   $('#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); }); var $elem = $('body');
   $('#GoToDown').click(function () {
   $('html, body').animate({scrollTop: $elem.height()}, 4000);
   $('#GoToDown').fadeOut()
   });
   $('#BounceToTop').click(function () {
   $('#GoToDown').fadeIn()
   });
    });
   </script>
   <div id='BounceToTop'><i class='fa fa-chevron-up fa-lg'></i></div>

4. Terakhir sisipkan kode responsive di bawah ini dimana saja yang penting pada bagian @media screen
   

   @media screen and (max-width:550px) {
   #nav label span,#BounceToTop {display:none}
     }

5. Lalu simpan pekerjaan Anda, selesai dan lihat hasilnya. Selamat mencoba.

Ayo Like Facebooknya

Tag : Blogging