Friday, 18 January 2013

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!

http://2.bp.blogspot.com/-RfWE674DTy0/TsdOGXLY_OI/AAAAAAAAAMA/ZoQDr__zr1w/s1600/th_topblack.png

http://2.bp.blogspot.com/-YfYerwZkqSA/TsdOI6CumnI/AAAAAAAAAMU/l2F1aH4oX2E/s1600/th_topgray.png

http://1.bp.blogspot.com/-qFcJKQUpMI8/TsdOHpddONI/AAAAAAAAAMQ/PcNT5ctOx7w/s1600/th_topborange.png

http://3.bp.blogspot.com/-maTRTJI-VaY/TsdOJ4KLkoI/AAAAAAAAAMk/HplY9aqGVFU/s1600/th_toppink.png

http://4.bp.blogspot.com/-iY3BgtwpcGQ/TsdOJVQWU_I/AAAAAAAAAMc/AniOr0XrI7Q/s1600/th_topgreen.png

http://4.bp.blogspot.com/-yOC-Ypl2Wik/TsdOHAAGSBI/AAAAAAAAAME/XUx15wKZF6w/s1600/th_topblue.png

♥ Thanks For Reading This Entry ♥

0 panda(s):

Post a Comment

Do Leave Your Comment On My Blog .

All Copyright © Are Belongs To Nur Nadhirah Yasmin