ARSIP BLOG

Cara Membuat Tombol Back To Top Dengan Efek Scroll Dan Auto Hide

Posted by Bhernadin Erryco on Kamis, 20 September 2012

Pada postingan ini, tombol kembali ke atas seperti di blog yusradante dengan efek scroll dan juga auto hide. Langsung saja caranya sebagai berikut:
  1. Pada dashboard blog, pilih tata letak.
  2. kemudian pilih tambah gadget
  3. pilih HTML/Javascript
  4. Kemudian copy kode di bawah ini dan paste pada koloh HTML/javascript tadi
  5. <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="http://3.bp.blogspot.com/-b1hw2cqey60/TfzE0oLSFkI/AAAAAAAAD3w/FpMh-mdf7rA/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>
  6. Simpan
Silahkan ganti link image yang berwarna hijau di atas dengan gambar anda. 
 Jika anda ingin gambar back to top silahkan kunjungi link ini.

Sumber 

{ 7 comments... read them below or add one }

tenda sejarah mengatakan... Reply Comment

good info sob :-q

Angel Shared mengatakan... Reply Comment

terima kasih tutorialnya...

Cyber4rt mengatakan... Reply Comment

Silakan SUBMIT artikelnya di http://www.cyber4rt.com
It's free and boost your traffic ;)

Mr-Er mengatakan... Reply Comment

thanks mas bro,
say coba ya

mao qiuyun mengatakan... Reply Comment

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

Xiaozhengm 520 mengatakan... Reply Comment

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

Terapi ion mengatakan... Reply Comment

Terapi Ion
Terapi Ion Rendam Kaki Air Garam
Peluang Usaha Rumahan
Terapi Ion Elektrik Rendam Kaki Detox
Manfaat Terapi Ion Elektrik
Terapi Ion Elektrik
Terapi Kesehatan Murah
Peluang Usaha Modal Kecil
Harga Paket Alat Terapi Ion Elektrik
Pengedar Alat Terapi Ion Di Malaysia

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ :-? #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

Poskan 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