Cara Membuat Tombol Back To Top/Efek Jquery Smoth

Cara Membuat Tombol Back To Top/Efek Jquery Smoth

Cara Membuat Tombol Back To Top + Efek jquery smoth - Cara simple dan sangat mudah untuk tutorial blogger ini, kebayakan sebuah blog atau website yang tidak mempunyai tombol Back To Top atau kempali ke atas mungkin sebagian para pembaca berita di internet sangat kesal karana kadang membaca artikel yang begitu banyak dan ingin kembali ke atas kadang harus memainkan scrool pada samping blog, di sini saya akan share cara mudah untuk membuat Back To Top. seperti artikel sebelumnya saya sudah share tentang Tips Cepat untuk Menulis menarik Tulisan di Blog Anda karana ini pun dapat membantu dalam kemajuan blog atau website yang kita kelola.

Cara Memasang Back To Top di Blogger 

• Login terlebih dahulu ke akun blogger anda
• Masuk ke bagian layout / tata letak
• Add gadget
• Pilh add HTML / Java script
• Lalu simpan kode dibawah ini

 <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script><script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script><script type="text/javascript" >       var scrolltotop={ 

        setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
        controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyT333s5wvWTSzmVxLM83z3kl3cU4uz5wSl-1zWeB2V_yTwdcXvgyst4MY1yNZPxnsUlOJdHm5j5NyswJcssSLX-MAh59iFD0Dl1WOk6O9QDbvQ5kR0NpeCNenQlydQN3D9TORGdcGmww/s1600/back-to-top.gif" />',
        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 //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()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
                    mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
                mainobj.togglecontrol()
                $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                    mainobj.scrollup()
                    return false
                })
                $(window).bind('scroll resize', function(e){
                    mainobj.togglecontrol()
                })
            })
        }
    }
    scrolltotop.init()
    </script>

• Yang berwarna merah adalah link gambar, jika ingin menggantinya silahkan sesuaikan keinginan sobat tombol  Back To Top.