Cara Membuat Tombol Back to Top pada Blog

Walaupun sebenarnya tidak ada hubungannya dengan dunia kampus. Tapi tidak ada salahnya jika kita juga mempelajari hal lain, terutama dalam pembuatan sebuah blog atau website. 

Kali ini kita akan mempelajari bagaimana cara membuat tombol back to top pada blog.

Back to top dalam bahasa Indonesia adalah 'kembali ke atas'. Maka jika diartikan sesuai dengan penggunaannya, tombol back to top merupakan tombol yang berfungsi membantu pengunjung website untuk lebih mudah kembali/ menuju ke halaman paling atas dengan sekali klik. Sehingga kita tidak perlu lagi menggunakan fungsi scroll mouse untuk melihat halaman yang telah terlewat.

Tombol ini biasanya berupa gambar panah menunjuk ke arah atas dan terletak di bagian sudut bawah kiri/ kanan di sebuah website. Tombol back to top itu ada bermacam-macam, sesuai dengan gambar yang sebelumnya sudah kalian buat. kalau belum punya, coba cari di internet. Disana ada banyak.

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'/>

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 :

cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO05vb9_pgM1aS6ZdKsFMZz8didC3iqshMItEWZ5P0ph6PYHAIHwn8355WeW3EhyphenhyphenKidPgFwxBSuJKbLshF_wBPxaL_u6-4D3jahi7iLzMu5qOEdL2dtU2K_hqtuP9VUs52AiljUw5FISgx/s1600/arrow-up_basic_blue.png'/></div>

Tampilan tombol dengan kode di atas menggunakan fade in/ fade out (muncul perlahan). Apabila tombol ingin muncul dari bawah seperti blog 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>

Okesip. Sekian.