Memasang Tombol Back To Top Pada Blog

Tombol Back To Top adalah sebuah tombol yg berfungsi untuk mengembalikan posisi halaman web ke posisi paling atas dari halaman web tersebut dengan hanya sekali klik, tanpa harus menggulir scroll mouse berulang-ulang kali. Bagi pemilik blog, memasang tombol ini akan dapat memudahkan pengunjung dalam menelusuri blog kita, dan tentunya pemasangan tombol back to top ini juga tidak terlalu memberatkan loading web. Dan bagi kalian yg ingn menambahkan tombol back to top ini ke halaman web kalian, silahkan ikuti panduan berikut ini.

1. Log in ke dasbor blog kalian.
2. Pada menu "tata letak", tambahkan widget "HTML/javascript"
3. kosongkan judul widget, kemudian pastekan kode berikut ini.

<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:[2000, 2000]},    controlHTML: '<img src="Gambar Back To Top"/>', //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: 'Scroll Back To 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>

5. Kode yg berwarna merah, bisa kalian ubah nilainya dengan keterangan sebagai berikut.
keterangan :
-. Starline : Ukuran tinggi dalam pixel setelah halaman digulir kebawah, diamana tombol Back To Top akan muncul. Nilai defaultnya adalah 100.
-. Scrollto : Posisi tujuan tombol Back To Top setelah diklik, dihitung dari paling atas 0 artinya 0 pixel dari atas halaman.
-. Scrollduration : Kecepatan atau durasi scroll, semakin ditambah nilainya maka semakin lambat.Defaultnya adalah 1000 (1 detik)
-. Fadeduration : Kecepatan atau durasi fade, fade adalah gerakan muncul. yang pertama nilai Fade In dan yang kedua nilai Fade Out. Nilai defaultnya adalah 500 dan 100.
-. Offsetx : Posisi tombol Back To Top, semakin ditambah maka akan merapat kedalam. Defaultnya adalah 5.
-. Scroll Back To Top : Kata-kata yang muncul pada tombol apabila mouse melewati tombol Back To Top. Bisa dirubah dengan kata-kata yang diinginkan.

6. Setelah selesai silahkan simpan widget untuk menyelesaikan pemasangan tombol back to top.

Penulis : ENDs ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Memasang Tombol Back To Top Pada Blog ini dipublish oleh ENDs pada hari Friday 8 August 2014. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Memasang Tombol Back To Top Pada Blog