Cara Membuat Tombol Naik (Back to Top)

Bagi yang belum memasang kode jquery, langsung saja ikuti langkah dibawah ini :

1. Login ke akun blogger Anda DISINI

2. Klik -> Template

3. Klik -> Edit HTML

4. Copy kode berikut dan letakkan tepat diatas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

5. Klik -> Save

Kode jquery telah terpasang pada template blog Anda.

Sekarang saatnya memasang widget tombol back to top di blog. Ikuti langkah berikut ini :

1. Klik -> Layout

2. Klik -> Add Gadget

3. Klik -> Add javascript/HTML

4. Copy kode dibawah dan paste-kan 

<script type="text/javascript" >

var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img width="64px" hight="64px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbZQk92U47ixRQHGXGl1mJ3fUXGrl7VOi8Kn7DTwZZ2OeuS0OHRSXblmb1l-yszXKd0kQMkeSp1dnrYRaippYwMhoKHOTXEkFMmRViMqhN8-394-BhTp9FnrULAG-bPnHjWYdHhnguvlYR/s1600/back+to+top.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>

5. Klik -> Save

6. Klik -> Save Settings

7. Selesai

Anda dapat merubah beberapa efek pada Tombol Back to Top tersebut. Untuk memodifikasi efeknya, perhatikan poin - poin dibawah ini : 

1. Startline : Integer nilai pixel ke bawah dimana tombol back to top akan dimunculkan. Menambah nilainya berarti tombol akan ditampilkan lebih ke bawah setelah user scroll down. Nilai default di atas adalah 100.

2. Scroll Duration : kecepatan scroll (dalam milidetik), semakin tinggi nilainya, maka gerakan scroll semakin lambat. Defaultnya adalah 1000 (1 detik).

3. Fade Duration : kecepatan atau durasi fading (dalam milidetik), nilai pertama adalah nilai fade in dan yang kedua adalah fade out. Nilai defaultnya antara 500 dan 200.

4. Scroll To : tujuan scroll setelah tombol di klik. Nilai 0 (dalam piksel) seperti default diatas berarti scroll akan kembali ke bagian paling ujung atas (titik 0). Menambahkan nilai berarti akan menurunkan titik tujuan scroll.

5. Off Set X : merupakan nilai posisi X tombol Back To Top (dalam piksel), semakin ditambah maka semakin menjorok ke dalam. Defaultnya adalah 5.

6. Off Set Y : merupakan nilai posisi Y tombol Back To Top (dalam piksel), semakin ditambah maka semakin menjorok ke atas. Defaultnya adalah 5.

7. Anda dapat memodifikasi gambar (Tombol Back To Top) dengan mengganti URL gambar yang berwarna merah dengan URL tombol gambar yang Anda inginkan.

Demikian artikel saya mengenai bagaimana cara membuat tombol naik atau Back To Top di blog. Selamat mencoba.