Membuat Back to Top Button ( Tombol Kembali ke Atas ) menggunakan JavaScript

Pada artikel rumah komputer sebelumnya yaitu Membuat Back to Top Button ( Tombol Kembali ke Atas ),kita telah membahas bagaimana membuat tombol kembali ke atas.Nah,sekarang artikelnya tetap sama,cuman kali ini proses kembalinya agak mempunyai efek.hihihihi...

Kalau mau coba,ikutin aja ya langkah-langkah beikut.Oke?

1. Login ke blogger dulu.
2. Masuk ke tab Design > Page Elements
3. Selanjutnya klik add a gadget pada kolom widget yang tersedia.Pokoknya,terserah kolom widget yang man.

4. Pilih HTML/JavaScript.

5. Copy paste kode berikut di dalamnya.Judul widgetnya kosongin aja.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIcWss_cLImcz9zlp6uVBivSrEDxCsBBJV3KCM3WQUxeH5G1EepTPiRoTlGJ-IvI71OC6V7Yt6xZTI90gRl1Q2YvJZ3JQcnOhTkjhCjRDNwanDU4UeF9gE9y2DEVoOXC7SBbR7vFeBLio/s1600/kursor3.gif" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
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 //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

6. Kode yang berwarna merah merupakan link gambar yang ingin sahabat rumah komputer jadikan button back to top.Ganti sesuai dengan gambar yang diinginkan.Berikut saya sediakan beberapa gambar yang saya buat sendiri. [hihihi].

7. Kalo misalnya sahabat mau gunakan salah satu dari gambar di atas,klik kanan aja gambarnya,trus pilih Copy link location.Selanjutnya paste link tadi di tulisan yang berwarna merah.
8. Terakhir,klik Save dan lihat hasilnya.

Gampangkan :) .Kalo masih belum jelas,silahkan tulis pertanyaan anda di bawah kotak komentar berikut.

Semoga bermanfaat ..
Salam rumah komputer ..