Membuat Tombol Back-To-Top pada Blog

Tweet

Banyak web ataupun blogger yang yang menyajikan artikel, tutorial, dan informasi-informasi yang panjang dalam tulisannya. Dengan seperti itu, kita kadang males menggerakkan scroll apa mouse untuk kembali lagi ke awal tulisan (kembali keatas). Untuk itu, sebaiknya bagi temen-temen pemilik blog untuk memasnag tombol keatan alias back to top button.

Sebenarnya tutorial seperti ini sudah banyak diketahui bahkan di share kan oleh para webmaster-webmaster, akan tetapi pada tutorial yang akan Kang Fathur bagikan beda dengan pada umumnya. Banyak tombol yang saya jumpai diblog temen-temen langsung menuju keatas saat tombol itu diklik. Lah, yang ini tidak, saat back to top button diklik maka akan tampil seperti gerakan scroll pada mouse. Bisa anda buktikan pada blog ini persis dikiri bawah.

Caranya sangat mudah, tinggal anda memasukkan code javascript pada HTML yang dipasang di widget blog. Dan ini kode yang harus anda masukan pada widget atau gadget blog anda.

<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/AVvXsEicBEcVxtq1m2-rDwRh9np8ZxdzvA4YcUO1z06NNMKfhqRQaLVd2phBrDgVV2N6ciyf5yZjM_3bD8H_0ewaTM6apgI9sw3iaFIkvHW6AENHyVi8Jcj_pQwUgcGJaOGKOjBAS4XgMOfxWo0/" />', //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>

Langkah selanjutnya memilih Edit HTML dan cari kode </head> dan copy paste kode dibawah diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Oke semoga artikel kecil ini bermanfaat bagi anda semua. Selamat mencoba...

Jika Anda menikmati posting ini dan ingin dihubungi setiap kali posting baru diterbitkan, maka pastikan Anda subscribe to our regular Email Updates!

Please...!!! Bookmark artikel ini melalui layanan Bookmarking favorit Anda: