Cara Menambahkan Tombol "Back To Top"

Mungkin kalian semua sudah familiar dengan tombol ini yang biasanya dapat kita lihat di beberapa blog pada posisi sebelah kanan yang jika kita klik akan langsung menuju ke top area atau area paling atas pada halaman tersebut. Nah, di artikel pertama ini saya akan membahas tentang "Cara Menambahkan Tombol Back To Top".
Langkah-langkahnya bisa dilihat dibawah ini:

1. Masuk ke Dashboard blogger > kemudian pilih menu layout
2. Klik "Add a Gadget", lalu pilih "HTML/JavaScript widget"

Kemudian pastekan script dibawah ini pada bagian content.

JQuery code.

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type='text/javascript"></script>

Catatan: jika sudah terdapat script JQuery pada blogger anda, langkah ini tidak perlu dilakukan, dan langsung saja menambakan script dibawah ini.

Script Tombol Back To Top

<script type="text/javascript">
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<'img src="LINK GAMBAR" />',
controlattrs: {offsetx:5, offsety:5}, 
anchorkeyword: '#top', 
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) 
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
 mainobj.$control=$('
'+mainobj.controlHTML+'
')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

Ubah LINK GAMBAR dengan link gambar untuk tombol yang akan anda pasang nantinya.
Dibawah ini ada beberapa gambar untuk tombol Back To Top yang mungkin ingin anda gunakan: