Cara Membuat Tombol Back to Top dengan Scroll Otomatis di Blog

Tutorial Blog - Pernah liat tombol back to top nggak? Itu loh tombol yang jika di klik, blog atau website-nya akan secara otomatis scroll ke atas. Tujuannya sih cuma buat memanjakan pengunjung blog. Misalnya, setelah pengunjung membaca postingan kita, terus ingin melihat menu pulldown yang letaknya paling atas. Jadi pengunjung tinggal klik aja tombolnya. Nah, buat sobat yang ingin buat tombok Back to Top silakan ikuti langkah berikut:

1.  Login ke blog sobat.
2.  Setelah masuk ke dashboard, pilih menu Tata Letak
3.  Klik add a gadget
4.  Pilih HTML/JavaScript
5.  Kolom Judul di kosongin aja, terus copy kode berikut dan paste di kolom konten.

<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="URL GAMBAR DISINI" />', //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>

Keterangan :
Ganti tulisan URL GAMBAR DISINI dengan alamat url gambar/animasi yang diinginkan. Jika sobat tidak punya gambar yang pas, silakan copy url gambar di bawah.

6.  Klik Save/Simpan

Animasi dan Gambar buat Tombol Back to Top kamu

http://1.bp.blogspot.com/-gISRgZA4hnY/UPblPTIT1pI/AAAAAAAACAU/w9eLeowmJZE/s1600/back+to+top10.gif

http://4.bp.blogspot.com/-I-0pPvwmSo4/UPblPbp4yPI/AAAAAAAACAY/emK-kxRfJPI/s1600/back+to+top4.gif

http://4.bp.blogspot.com/-K39ZrF6IAX4/UPblQeChKnI/AAAAAAAACAg/go6bOD-40Gc/s1600/back+to+top7.gif

http://4.bp.blogspot.com/-a59gfdLJTJU/UPblQr_4pnI/AAAAAAAACAo/gAygGuiqovw/s1600/back+to+top9.gif

http://2.bp.blogspot.com/-5xtKo3sslHs/UPbpgD8LY2I/AAAAAAAACBc/gIQGZ9ZBzDg/s1600/back+to+top13.png

http://1.bp.blogspot.com/-GOFEDMYSa4Y/UPbpgB4AekI/AAAAAAAACBg/qgQrtPIpovc/s1600/back+to+top14.png

http://3.bp.blogspot.com/-twCluUe7WBE/UPbpgayOBNI/AAAAAAAACBk/Vj_ZhY4y4Vc/s1600/back+to+top15.png

Sekian dari saya, semoga berhasil..