Cara Membuat Tombol Naik (Back to Top)

Pada artikel kali ini saya akan share mengenai bagaimana cara membuat tombol naik atau Back To Top di blog. Namun ada sedikit perbedaan dari tombol back to top yang lainnya. Tombol yang saya share ini menggunakan javascript dan jquery. Bagi Anda yang belum memiliki kode jquery ini, disarankan untuk memasangnya lebih dulu. Namun bagi Anda yang telah memasang kode jquery di template blog, sebaiknya tidak perlu memasangnya lagi.

Tombol naik diperlukan ketika pembaca ingin kembali ke awal postingan. Apalagi kalau artikel tersebut cukup panjang, maka pembaca tidak perlu repot untuk scroll ke atas, cukup dengan menekan tombol naik saja di blog.

Baca juga artikel : 
- Cara Memasang Tombol Next Page (Halaman Selanjutnya) di Blog
- Cara Membuat Kode Warna di Blog

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/AVvXsEjVhkKGqm-4f_Jw_lXuOCJnVt4LOrC6xlnUj6LhyDmHsExfpcdLv7e_O9O_kZv1mraclm6tBAW-CWjdcC9QlYiIkYAPP3I-rkcskPgMZ4c4A7vgaN0IAtQfq_DqQBUCIB2iZ8dwHlc41U-j/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 di mana 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 bagaiman cara membuat tombol naik (back to top) di blog. Semoga bisa bermanfaat dan selamat mencoba.