Tutorial Back To Top Button

Assalamulaikum n Holla Guyzz ^_^

Kay..Last tutorial untuk hari ni. Maybe. Kay..korang tau ker mende back to top button. Hah..button ni slalu ade kat blog yang slalu update pepanjang. But bukan untuk blog yang update pepanjang jer boleh guna. Semua pon boleh guna. ^_^. So common!.

1. Dashboard > Template.

2. Lepastu search kod ni :

----------------------
         </head>
----------------------


3. Copy lepastu paste code ni di bawah </head> tadi.


----------------------------------------------------------------

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript' language='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 (1=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration
:[500, 500]},
controlHTML: '<img onmousedown="event.preventDefault ? event
.preventDefault() : event.returnValue = false" src="URL IMAGE"/>',
//HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/
 center 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() - t
his.$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=="CSS
1Compat"? $('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:'Fly To The Sky'})
.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>

-------------------------------------------------------

4. URL IMAGE tuh tukar kepada url korang.

5. Preview bila dah jadi Save!.