Cara Membuat Tombol Back To Top

Membuat sebuah tombol back to top (kembali ke atas) dengan efek geser yang halus ke atas bisa jadi merupakan salah satu fungsi yang diperlukan oleh sebuah blog atau website. Tombol ini dibuat dengan tampilan dan sentuhan yang cukup elegan.

Tombol Back to top berfungsi bagi sebuah web blog dengan konten yang sangat panjang dan kita malas buat ngescroll ke atas, back to top ini tidak memberatkan blog

Langsung Aja Berikut Turtor Cara Membuat Tombol Back To Top

Masuk Ke BlogKlik Template
Cari kode </head> (tekan CTRL+F mempermudah pencarian)
Letakan Kode Berikut Di Atas Kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>

Cari kode </head>
Letakan Kode Berikut Di Atas Kode </head>

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

cari kode ]]></b:skin> (tekan CTRL+F mempermudah pencarian)
Masukan kode CSS dibawah ini diatas ]]></b:skin>

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

Cari Kode </body> (tekan CTRL+F mempermudah pencarian)
Letakan kode di bawah ini di atas </body>

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA9ZzBV-0aueqved1cX5mDgL0mkdVIHhmvMWW0MdjQUh1dPG1NW4SlNOOF4iw42CFDI9bIwWFF-Kgpst20Zqy1MmzKUPgoeAw_7IWI5XmfoRHP8y6kiwCMR2etA_0GARenH-5fq5ZP8u8/s1600/backtotop.png'/></div>