//Tutorial World
Freebies :: Scroll up to the jquery
Sunday, 1 July 2012 • 17:37 • 0 comments

بِسْــــــــــــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم
✿ ♥ Childish Girl wrote tutorial ! ♥ ✿

Hii..... Bagi senyuman dulu kat korang xDD

Dah lama aku tak buat tuto tuto ni.... Haha....
Tapi ini first time punya lah aku buat freebies....
Walaupun ada "childish" sikit, harap harap korang suka yerr xD

Untuk code dia, copy code dia yang ada di bawah ni okayy !
<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() - 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 //not IE or IE7+ browsers in standards mode
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:'Let's climb :)' })
.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>
Code ni khas untuk pengguna Classic Template a.k.a Blogskins....
Paste kan dia diruangan Edit HTML yerr....
Macam mana nak buat?
Paste jer lah dia di mana mana yang patut.....
Make sure pandai main main coding yerr bukan main main bola xD

Code ni pulak bagi sesiapa yang menggunakan Template Designer 2006 a.k.a Layout
<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" />',
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>
Yang ni pulak..... Nak paste di mana????
Paste lah di ruangan Add Gadget....
Pergi Design, Page Element, Add Gadget, HTML Javasript....
Haha xD

Tiba masanya aku bagi freebies free of charge dekat korang.....
Sorry larh kalau dia nampak childish sikit..... (Memang sifat aku ni pon 50% childish gakk)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiq1OrhKUGyi_zgLclui8zqRVHHidJyyllJ87lRjofKhvgqFgoQGb666JMxf8mkQTrrWoPkd8pnhfQrQcbVmmI8paLp7umKMWl3FUqCbADy5CwOvl0rxCgS8zqaidDCEQOcNKdbyygLXg/s1600/blue.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3fhhsCuBos-LvPTy9sukEHKPp54OMb7OeoXBvddpbGqqY3q9mKVryl8eRpNQ737TR9yLTTR7cEUSetjwFJ-aSGXn-9HWXarc1MH8mRY5cvUIhyphenhyphenurS4j6bXWf_PXheemM9OL7TAx64G1M/s1600/green.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ0JeKj7_OnMsCsnDYFkDiEG_q4CtlUaeRUd5qAyP_Z-3mxBr4KtK-ce8NfSgd5BOwY6EjvfbBVmG2Z-excZmdDO9i1QboJM7T1IZUAie3oYmGBOVBh2spzZdiYkW7_KYZY_oz2jifpoI/s1600/orange.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZrdRjIVVujpc0Ptz6thyLtq1sjmSe6O3J7mpVQvgpFz-KBcoxKxe_OVEvDF_OIEUXZs1OZbgcui0vzEFfmQwpWb2LGHQT4ZUtuuoSRrHT2sER8B7g8zsd116IFcwci1Y2V0XLEGwPQL0/s1600/red.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinEBTy8OmOUDc7wlLTs4bRvarC2omcje0Se-OwaV9D80uPlDCoLY2E9jCiXgcxPVxhmY7fhhLG75UjtwUc82E7m8uoc6CA5lXDuYvyKp6DMTYMK_sd-3r0kDVEC8j5zA87ELsn6Ce_1vY/s1600/yellow.png
Haha..... Apa macam?
Ada buruk kan?
Tapi, Sesetengah orang tu kata kan.... Practice Make Perfect right?
Haha.... Hope korang suka.... Ambil jer.... Korang tak kredit freebies ni pon aku tak kisah xDD
Insyaallah, if ada sedikit masa yang terluang ker.... Aku buat plak freebies header ker.... Or whatever freebies ker....
Ok lah.... Sampai sini jer aku tulis ni.... Ok.... Aku nak choww !
Nak lari pecut 1500 meter xP

Bye, Assalamualaikum, Sayounara....




Labels:


? Newer Posts ? Older Posts ?
The Baka Owner xP


Hello, Assalamualaikum, Konnichiwa.... I`m Lailatul who is speaking here.... Btw, I`m an otaku (anime lovers).... Do a follow ok, be nice here xD.
bold italic underline strike

Diary
Profile
Links
Tagboard

Rewind



Credits


Template By: Nurul Afiqah
Big helped: Aulia Septiya
Edited: Lailatul_Kuronuma987