Tutorial : Scroll To Top (Back To Top)

.♥.♥.♥. Assalamualaikum cinta .♥.♥.♥.

Apa itu Scroll To Top (Back To Top)?

Back To Top nie fungsi dia adalah untuk memudahkan pelawat blog korang untuk naik ke semula atas bila baca atau tengok satu2 entry yang panjang berjela tu kan. Contohnya, bila klik dekat button scroll to top (yang bergambar cartoon and butterfly) tu automatik akan naik ke atas page tersebut, tak payah nak scroll naik ke atas...
Step 1 : Layout > Add a Gadjet > HTML/JavaScript
Step 2 : Copy code kat bawah nie.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >/***********************************************
* Scroll To Top Control script- &#169; Dynamic Drive DHTML code library(www.dynamicdrive.com)* Modified byNosa***********************************************/var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URL IMAGE BUTTON SCROLL TO TOP" />',
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=$('<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:'Back 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>

Step 3 :

Paste kan code yang telah di copy tadi di ruangan HTML/JavaScript .

Step 4 :

Gantikan URL IMAGE BUTTON SCROLL TO TOP kepada image yang korang suka. Just copy URL image yang korang suka dan paste kan di URL IMAGE BUTTON SCROLL TO TOP. 

Step 5 :
Then save and preview, tengok menjadi ke tak...

Dibawah nie n0sa ada letakkan tiga jenis button 'back to top' untuk korang pilih. Korang just copy url dan letakkan pada url image button scroll to top.

http://i.imgur.com/g9Ohv9B.png

http://i.imgur.com/KTVWT3w.png

http://i.imgur.com/IGIzRyB.png