Pada postingan ini, tombol kembali ke atas seperti di blog yusradante dengan efek scroll dan juga auto hide.
Langsung saja caranya sebagai berikut:
- Pada dashboard blog, pilih tata letak.
- kemudian pilih tambah gadget
- pilih HTML/Javascript
- Kemudian copy kode di bawah ini dan paste pada koloh HTML/javascript tadi
- Simpan
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/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 (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZSsokmXmnPTEa_0hEHgORzHyTR-ZwJKIzZa71htE-_QJH3pmptUdnr-2Ju_51m1NcjnJU3rR_HKPDt_zwCF9sHFCl6ldBhc-oMYRgpUNTkAgWz7R03CBDuYrgMZLOQnOPM7qMu9yihPU/s400/Back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom 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:'Scroll Back to Top'})
.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>
Jika anda ingin gambar back to top silahkan kunjungi link ini.
Sumber
{ 6 comments... read them below or add one }
good info sob :-q
terima kasih tutorialnya...
Silakan SUBMIT artikelnya di http://www.cyber4rt.com
It's free and boost your traffic ;)
thanks mas bro,
say coba ya
michael kors outlet, http://www.michaelkorsoutletcanada.in.net/
nike air force 1, http://www.airforce1.us.com/
soccer jerseys, http://www.soccerjerseys.us.com/
mulberry outlet, http://www.mulberryoutlet.com.co/
lacoste polo shirts, http://www.lacostepoloshirts.cc/
michael kors outlet, http://michaelkors.outletonlinestores.us.com/
ralph lauren uk, http://www.ralphlauren-outletonline.co.uk/
toms outlet, http://www.tomsoutlet-stores.com/
polo ralph lauren, http://www.poloralphlauren.us.org/
nike free uk, http://www.nikefreerunning.org.uk/
ralph lauren outlet, http://www.ralphlaurenoutlet.in.net/
christian louboutin, http://www.scarpelouboutin.it/
michael kors handbags, http://www.michaelkorshandbagsoutletstore.us.com/
cheap nhl jerseys, http://www.nhljerseys.us.com/
the north face clearance, http://www.thenorthfaceclearances.us.com/
north face outlet, http://www.thenorthface.me/
rolex watches uk, http://www.rolexwatches-uk.co.uk/
coach outlet online, http://www.coachoutletonline-store.us.com/
louis vuitton bags, http://www.louisvuittonbag.us.com/
mbt shoes, http://www.mbtshoesoutlet.us.com/
chanel handbags, http://www.chanelhandbags-outlet.us.com/
michael kors outlet, http://www.michaelkorsoutletusa.net/
cheap oakley sunglasses, http://www.cheapoakleysunglassess.us.com/
the north face uk, http://www.thenorthfaces.org.uk/
jordan shoes, http://www.jordan-shoes.us.com/
hollister uk, http://www.hollistershirts.co.uk/
oakley sunglasses, http://www.wholesaleoakleysunglasses.us.com/
abercrombie and fitch, http://www.abercrombie-fitch.us.com/
0924maoqiuyun
2015-9-24 xiaozhengm
Air Jordan 6 Cigar
Michael Kors Factory Outlet Online Official
michael kors handbags
michael kors outlet online
coach factory outlet
Michael Kors Handbags Factory Outlet
ugg boots outlet
Louis Vuitton Outlet Factory Online
hollister
cheap jerseys
canada goose outlet usa
air max 95
burberry outlet
michael kors uk
celine bag
Michael Kors Online Store Outlet
Kobe Basketball Shoes For Sale
nike free run 2,nike free runs,nikes,nike air max 95,nike high tops,air force 1,nike pegasus
uggs on sale
Louis Vuitton Backpack Purse
ralph lauren uk
michael kors bags
Authentic Montblanc Pens Sale Online
Michael Kors Outlet Sale Online Store
Hollister Shirts For Women
louis vuitton
ugg boots on sale
Louis Vuitton Neverfull GM Monogram
Ray Ban Outlet Store Online
Nike Lebron James Shoes For Sale
Posting Komentar
Ketentuan komentar:
- Baik dan Sopan.
- Komentar harus sesuai dengan isi postingan.
- No Spam, No Junk, No Rubbish, No Porn.
- Mudah Dimengerti.
Dimohon juga untuk Meng-Kritik atau kasih Saran buat Blog ini
Terima Kasih