Tutorial : Scroll Back To Top

Assalamualaikum

Yasmin akan ajar korang buat tuto ni. Alah yang bila tekan perkataan "fly up" or etc dia akan terus scroll back to top. So, let's begin!

1. Log in > Dashboard > Design > Add a Gadget > Html/JavaScript

2. Copy then paste kat ruangan html tadi

<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 byLyssaFaizureen***********************************************/var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URL IMAGE FLY UP" />',
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:'Scroll 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>

 3. Yg warna merah tu korang tukarkan url kt bawah
4. Save!

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrUMs-zbkWnn6Nx8Q_3uw1TOwMebKJlW9qWgkkBZSDjRzL6OSvk4gz6NQ4maX65l0GTSms3Ux3pDotvaKqZMHCljjdzs01qj5h8wGTON3n4z2Aq3xUx9CSmplecrqHcLUxm6qWMwPnc6o/s1600/th_topblack.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgFaOmY-koKB64t8PSewmbBtblgr9w1FvjqZWR2rUrbOdpTJNxeyJKnF0X-CLUlPMiBUScmoFW7m8YekeSGHqHBeQh7KWH3sRQBfKF8iAkRqAFiCa_nDkhj55rOLrVoCc21eCm3_ArVzw/s1600/th_topgray.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikGu-rH6v2Ps5qUwNeoF8_tMPj2a6E3Riwrm8HPL22vuiDr1ZVYvew_MfwWPByVjPMkfF_9R_B-O8aUi4WT4HAAulbXXoHWj9bzr4FCTxekU7RCMOLS_r9OVeJJYKWkang_ORRARR_kuw/s1600/th_topborange.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEb2IzJ7C_bub02F98Xhjx8Ixa9B6o8FyLFwwhRvjUltwyYvz2f9peRqsgfZ9h3fteS9aHiRpHYbCo2olLgbJBmu5E1fN5XoEiRwS1vnglFZllu4mBmnIW_oJzlTu136apbN0B7J0fT6U/s1600/th_toppink.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghvKZIa4dXyo8laVcrlLI0oxXhEGFRZuZPBmo52GRIHDe2HkI5PyHOhMEk8nSADCnrD2Ez_rwVk1Wvgnq4Hus2C3CjGQmlPrB3R0FKLW_kcRyQWCxPlBnsTaGtPbe-fNoff2JKIE0toZQ/s1600/th_topgreen.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvCGelekdVRcfetpYE_X_dUvfUeloayqWkZfgAX6Q2w-TVJVTUGR42FrEBHFCGfJpe9noHm1m9qGd00Dics7J9Qxx9bPFPZyUALbHv-7_s2WE-nzRxQf6KWUFu1ywWcwOvc2lZa8EHdSc/s1600/th_topblue.png

---

♥ Thanks For Reading This Entry ♥

---