Cara Membuat Tombol Back to Top

Cara  Membuat Tombol Back to Top

Assalamualaikum warokhmatullohi wabarokatuh, bagaimana kabarnya sahabat blogger. kali ini admin ingin berbagi bagaimana caranya membuat tombol back to top di halaman web sahabat semua. Langsung saja :

Login dulu
Klik template dan pilih Edit HTML
klik 1 kali di template
Ctrl+F untuk melakukan pencarian cepat
setelah </head> ditemukan, setelah itu copy scrip di bawah ini di atas tepat </head>

<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>

     Keterangan dari Script : Warna biru adalah jarak tombol muncul dan sembunyi sedangkan warna hijau          adalah kecepatan berpindah keatas

     Cari kode ]]></b:skin> dan letakkan script dibawah ini tepat di atasnya

#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}    
#ScrollToTop:hover{opacity:1;}

     Warna hijau adalah posisi dari tombol Back to top

      Cari kode </body> dan copy kode dibawah ini di atas </body>

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR05imdFT5zs9mprete2oh1V0_8tX9rDwAsU91DqxthvvMqw3i9P_fL4QDCfrYLSXZwOuGaRVyYvkThqJdXpgkDWFTxCZZGzNi1Atf1dDqGA_cloazHMw98PJjfKyHqOCJCHC5bl2tcw0/s1600/backtotop.png'/></div>

warna pink adalah gambar dari tombol Back to top, lalu simpan template dan lihat hasilnya......