Membuat tombol back to top dengan efek jquery

Pada kesempatan kali ini saya akan share yang berhubungan dengan blog,yaitu membuat tombol back to top ,fungsi dari tombol back to top inia dalah sebagai ringkasan buat visitor blog kita agar memudahkannya menavigasi scroll bar ke atas tanpa cape - cape secara manual.sehingga saat tombol tersebut di klik maka scroll akan naik dengan sendirinya secara otomatis

Kelebihan dari back to top dengan jquery ini ialah tidak membuat blog menjadi berat karena tombolnya sendiri tidak terbentuk melalui gambar melainkan css.

Preview

Tutorial

• Pertam-tama login ke akun blog anda
• kemudian pilih menu,Template  > Edit HTML
• Pilih Syle yang anda suka mau tipe 1 atau tipe 2 ,kalau sudah Letakan salah 1 kode di bawah ini, di atas kode ]]></b:skin>

STYLE CONTOH 1

<style>

#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:darkred;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;left:80%;

-moz-border-radius-topleft: 30px;

border-top-left-radius: 10px;border-top-right-radius: 10px;}

#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>

STYLE CONTOH 2

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

• Kemudian letakan kode di berikut di atas kode </body>

<div id='Totop'>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> 

• Terakhir Save template anda 

KET :
Silahkan anda ganti kode yang saya tandai warna merah dengan warna pilihan anda,dan apabila back to top button tidak berfungsi,atau tidak work ,maka letakan kode Style contoh 1/style contoh 2 tersebut tepat di atas kode

<div id='Totop'>Back to Top</div>

Last word

Bagaimana mudah dan simple kan ?? semoga tutorial di atas dapat anda pahami dengan mudah :c: