Entry King Merah pada minggu ini !

Jumaat, 16 Mac 2012

Tutorial : Scroll Back To Top


Blog korang sudah memiliki SCROLL BACK TO TOP ...??? kalau ada ... korang kena ambil daripada tutorial King Ungu ini ... hari ini King Ungu nak buat tutorial mengenai scroll tu la ... jom ikut step King Ungu ...







Step 1 : Papan Pemuka > Reka Bentuk > Tambah Alat > HTML / JavaScript
Step 2 : copy code di bawah ini ...




<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="LETAK URL GAMBAR KORANG" />',
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>



MERAH = Letak URL Image Scroll Back To Top korang ...
Step 3 : Paste didalam tempat yang disediakan ....
Step 4 : Save ...


Dekat bawah ini ... King Ungu ada Free Image Scroll Back To Top ... korang bolehlah ambil ye ... kalau nak buat Scroll Back To Top sendiri ... boleh je ...


http://i1128.photobucket.com/albums/m488/fiekryy2/blue-1.png



http://i1128.photobucket.com/albums/m488/fiekryy2/darkblue.png



http://i1128.photobucket.com/albums/m488/fiekryy2/green-1.png



http://i1128.photobucket.com/albums/m488/fiekryy2/lightblue.png



http://i1128.photobucket.com/albums/m488/fiekryy2/oren-1.png



http://i1128.photobucket.com/albums/m488/fiekryy2/pink-1.png



http://i1128.photobucket.com/albums/m488/fiekryy2/purple-1.png



http://i1128.photobucket.com/albums/m488/fiekryy2/red.png



http://i1128.photobucket.com/albums/m488/fiekryy2/yellow-1.png




Tiada ulasan:

Catat Ulasan

Related Posts Plugin for WordPress, Blogger...