Cara Membuat Tombol Back To Top Pada Blog / Website

Kali ini saya akan berbagi kepada kawan semua, membuat tombol back to top pada blog ataupun website. cara nya cukup mudah. Tombol Back To TOp sangat berguna sekali jika pada suatu tampilan website sangat panjang sehingga akan memudahkan kita untuk kembali lagi ke bagian atas website.

Langkah-langkahnya sebagai berikut :

1. Silahkan masuk ke blooger kalian.
2. Kemudian tambahkan widget, java /html.
3. Pastekan kode dibawah ini.
4. Setelah itu kalian simpan. dan lakukan preview untuk melihat hasilnya.

-----------------------------------------------------------------------------------------------------------

<script type="text/javascript" >

var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img width="30px" hight="30px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwaHjEHr8kwf9Lubc_kJG5t9GneBxZjpj2SbBCoZeifvaTYQwcFQcB-XeKuOHW3eWaC3MRP9XQnch48CvDyfa32KEfm6yen-Qi5SAFFKlk07HwVUml9a5lbNAPVVi1-Wfsu69gSJbSZKc/s1600/Untitled-1+copy.png" />',
    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>

-----------------------------------------------------------------------------------------------------------

NB : Untuk melakukan perubahan pada gambar silahkan ganti URL gambar yang berwarna merah seperti pada script diatas. Semoga berhasil

Share on Google Plus

About Bgaze

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.