Back To Top

Tombol Back To Top adalah sebuah tombol yang terdapat di Blog atau Website yang dapat berfungsi sebagai scroll layar ke bagian paling atas halaman. Tombol ini sama fungsinya dengan tombol Home yang terdapat pada keyboard.

             Apabila halaman terlalu tinggi saat discroll kebawah dan ketika ingin kembali keatas, maka hanya tinggal mengklik tombol Back To Top tersebut maka akan dengan otomatis halaman  akan kembali keatas.

Cara membuat Back To Top :

1. Masuk ke Blogger
2. Pilih Layout
3. Pilih Add a Gadget
4. Tambahkan HTML/JavaScript
5. Masukkan Script seperti dibawah 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: '#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>

     6.  Ganti "Gambar Back To Top" dengan url gambar sebagai Back To Top

     7.  Jika telah terdapat script seperti "src="http://ajax.goo ... " pada template, maka                 hapuslah script tersebut agar tidak terjadi bentrok antara JavaScript

     8.  Kode warna merah bisa diubah sesuai keinginan :

• 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.

     9.  Terakhir Pilih Save untuk menyimpan

   10.  Selesai dan Selamat mencoba

Dibawah ini adalah beberapa pilihan gambar back To Top :

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcJeQZtMiz6c0UbX5igi_HF-TGSbVqpGOdK6fUkpeeYSwKO9_a7DiZaUmm_yuytcmlBobYzPTCRAoK7p4igdvoIxXksT0yw0Xq8giH6dnx-vPXLkWVb7wNSMJwQlPJ3WXXnkVcHWAUggR/s1600/arrow-up-icon+%282%29.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSIPXhGwEsyMFBtvaEM0-PzEAntn410oVZczg2NqFPBHRWNErXUOSC-0R_KBt2Rsvpm5eWfnnA9G6rp2tUV1RLSg4HRdCiOiCz745Gy0gS5jzeC3gUCi74uMGkdU27fjcMJjKoNaCmSI4d/s1600/arrow-up-icon.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbNuXz0auo0JbfoCKvuedJKKooGA93eh1NkR3_VW1HocqQr5w9xDHJk1r6-7FqeIC_ES68lRHp5uAiyBldS6EWgO9yVKFlrMbRQCjpzL4SgalGw-BCYxOjOh566ISPKw9Mct9oOlQDEKKD/s1600/Action-arrow-blue-double-up-icon.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5I3f-5YtrYLxxMe-nqySBGn931b3fBA-aFJCrykhSL-N5s0JOqI5WNZQLwJHLl8EY5vhMWJoX_oQAmSqwYcA99A6II9Zec3PNcL__y2apMXQc_siR35-bKtnABLy9Bx7Zs6uRUrbjT7Wx/s1600/box-up-icon.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdr1Ge29uqb72MyQkaAmiO6cZ-tNdZz_VqWcyB5LIarg1hYodnlfRwC6UYh2b33Mt5KHvIP_Xk_-nwRnktEzs8GmG64FKzLmmHz4GRnjF9Q-pJM-A7iN9lyCE2a0pBAZ3Wj1ZM1OcIS9O1/s1600/back+to+top15.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1cu9VZQx2ppK4Ty-a6dRMb5GNjr2tP8K1BM0fftDCTuKbtgVrYV3ZNU2T2_HD4YyQ7z6zXP12BRYBcdel6DSObg3oxHrxZ1Roep7-Xqsf8tSrbM9VPWPMwWjmEuDCCfru0W8dOJvN4e1D/s1600/back+to+top10.gif"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG3oNc75V1QeN2GHr1U62-E6p4rbLLBxo58T5iQX0xEXPeYkrEFbDz4JyufoVZD3uzwucnSzWeMKNEkEVRxhAMWhE89e255Mo7eMjB61XsASM0HOzseo2YrrvTZF6VR6wATrQUWh2MOdq2/s1600/back+to+top4.gif"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm9I4Pjg7Kh5k5MOqgML9WDiz1g-HQOu_rD_BEqBYT33aDjAHLgTbvKJt6dWpEm1_99yyaE-ELEPi3GslbxLMoMCOBQuYzag765Ty-oIu8AYzVR76OaE5GjnAU8utmZkmit1Fl4XHLqfV1/s1600/back+to+top9.gif"

"http://www.cleatandsbg4u.com/portals/0/top-icon.gif"

"http://th678.photobucket.com/albums/vv142/RajLaksh/th_top-icon.gif"

"http://www.chellescabs.co.uk/images/back_to_the_top_icon_for_chelles_cabs.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUbgyxQlDODVVBPoXpSHsb1_lUV-IzgW4Zxd01jkXZJvF1ME9oGeOEC7_PjdkOkghrU__oIAt1-1jET4MX36NTYE2Zlvw8RNbqUhycoxE32O4www1DXfCvFf5xuHacHitPoSwQP1KlGwzB/s400/bttp-14.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZplAl2vi_89fQmeQ4VAmiHY5_YBhKY_WbDZWkczDu_UTyBpFw2uZ9z3vXSkFOx9hi7_2SoR8iausrDR0rxhCKEYUhhb8GcDIn997rRAa-IQZPuf3GPRiAVzMuFNxQ9p-Xc3kHJU6XlzA/s1600/%2528punya-rizal.blogspot.com%2529Top.png"

"http://dancewyoming.com/blog2/wp-content/themes/claydell-media/images/icon_top.png"

"http://www.hopewelltwp.org/images/icon_top.gif"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWbhqjLiY8GHbkZ11H3Pe_wRotoxhxrQOnFixYlgkeR6YMJVAoJN6AN8KPawQfrgUgV_62oMK9Px0vHuFqecYIlgMvznD1x5s6yMTYhqdRuC74R49gd8bEn9euM-n7vpi6jG-BZoH_yVtc/s400/Jumptotop2.gif"

"http://2.bp.blogspot.com/-Gq3OE4WWUds/T8PO89DB8lI/AAAAAAAAA-w/cGQ--xpcI9c/s320/back_to_top.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXjGRAHe9-9rVEuAexBQvbPkgjS4Pw5PAp4SItJTto9mCiVVsgj2qp9Q5UDKpD6i0w2vhgyN7tP72QxZ7gXKhbOP63SWTsHDPRf8A4iy8Ss_SVFQbpXV5l5Nazh3nVXwuzo8XYtsuIwrk/s1600/up_button.jpg"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyJhh-DPsTdNG1xZnTeR443xJggMhWHLBTWRJ4K8SMaRmVLiCuMFsels8mbutUOR697K6h5cibFs7YX_KrpangQF-jsM-P6JEAKKNvj6DaK3PJyQ9gQc_wZGovluWGFILnd8Tg82s02vY/s320/Back+To+Top+Mfb.jpg"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwe0KrHaEuukiLwlygLQmLfa7HcwOiKsIsXGLafKfmFGmZ234Lj7FPQ9pmPw4M3o9Zf3AbrB-AhL5l2mpYQ9lW98ZFGANHzKXmWCFpTvobphfL1OPgAAp1156lt1tuKwOVYYjPssIsuqWx/s1600/2.png"

Semua Orang Yang Hidup Di Dunia Ini Pastilah Pernah Merasakan

Berada Pada Kondisi Titik Bawah Dan Berada Pada Kondisi Titik Atas Kehidupan

Karena Memang Kehidupan Ini Bagaikan Sebuah Roda Yang Berputar

Terkadang Berada Di Atas dan Terkadang Berada Di Bawah

Akan Terus Seperti Itu Hingga Sampai Ajal Datang Menjemput