Cara Membuat Smooth Scroll Back To Top di Blog

Jumpa lagi ni sob kali ini Badry akan share tentang "Tutorial Cara Membuat Smooth Scroll Back To Top di Blog". Bagi sebagian sobat mungkin sudah familiar dengan kata-kata smooth scroll back to top / kembali ke atas. Smooth sendiri berarti lembut. Jadi smooth scroll artinya menggulung dengan lembut. Untuk membuat Tombol Back to Top biasa, mudah saja sebetulnya, tinggal menambahkan kode # akan tetapi kembali ke atas secara langsung tidak lembut.

Smooth Scroll Back To Top ini dimaksudkan sebagai pintasan dari bawah naik keatas, apabila halaman terlalu tinggi saat discroll kebawah dan kita ingin kembali keatas, kita hanya tinggal mengklik tombol back to top tersebut maka dengan otomatis halaman akan kembali keatas. Smooth Scroll Back To Top ini menggunakan Jquery mungkin pada tutorial selanjutnya lebih praktis

Untuk memasang tombol Back to Top Smooth dengan Jquery ikuti langkah-langkah berikut :

1. Login akun Blogger anda.
2. Pada Dashboard pilih Template  Edit HTML
3. Letakkan kode berikut ini dibawah kode ]]></b:skin>

<style>
#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#7F007B;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;}
#backtop::after{content:&quot;&quot;;position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}
</style>

4. Kemudian letakkan kode berikut ini diatas kode </body>

<div id='backtop'>Back to Top</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-50",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script>

5. Simpan Template

• NB : Yang berwarna kuning di atas adalah kode yang bisa sobat tukar dengan warna dan tebal garis pada button back to top tersebut dengan warna dan tebal garis yang sobat suka.

Selamat Mencoba dan semoga Bermanfaat Silahkan anda sesuaikan sendiri oke, dan untuk demo langsung bisa sobat lihat di blog saya ini, Wassalam

Untuk Tutorial Blog yang lain bisa sobat dapatkan dan lihat  DISINI