Tombol Back To Top Dengan Effect Jquery

Hay teman, apa kabar ? bagaimana dengan blog anda kurang bagus atau sudah bagus. Pada artikel kali ini saya akan memberikan cara membuat tombol back to top dengan effect jquery. Berikut ini langkah-langkahnya :


1. Login blogger anda

2. Pilih blog yang dikelola

3. Masuk ke halaman tata letak

4. Pilih add gadgets/tambah gadgets

5. Kemudian cari HTML/Javascript, lalu klik +

6. Pada konten masukan script berikut :

<div align="left"> <span style="font-family: Georgia, Times New Roman, serif;"><span style="color: purple;"><script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></span><span style="color: purple;"></script><script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></span><span style="color: purple;"></script><script type="text/javascript" >       </span>var scrolltotop={  </span></div> <blockquote class="tr_bq"> <span style="font-family: Georgia, Times New Roman, serif;">    setting: {<span style="color: blue; margin: 0px; padding: 0px;">startline</span>:100, <span style="color: blue; margin: 0px; padding: 0px;">scrollto</span>: 0, <span style="color: blue; margin: 0px; padding: 0px;">scrollduration</span>:1000, <span style="color: blue; margin: 0px; padding: 0px;">fadeduration</span>:[500, 200]},<br />    controlHTML: '<img src="<span style="line-height: 20px;"><span style="background-color: white; color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-C32m50XOMq7nsvUitRu0AhwN43LJiI-kOF9hXsRaYt1RsOCpAeVGu-BmALY0fcvTD2_s2vwg0DV_RIsvtsHz0Hz1sp2G_IEtsaH5BekH9-HoGhN6wqlNkpYzETusA8UUX4Gs_XswKUE/s1600/navigate-up-icon.png</span></span>" />',<br />    controlattrs: {<span style="color: blue; margin: 0px; padding: 0px;">offsetx</span>:5, <span style="color: blue; margin: 0px; padding: 0px;">offsety</span>:5},<br />    anchorkeyword: '#top',<br />    state: {isvisible:false, shouldvisible:false},<br />    scrollup:function(){<br />        if (!this.cssfixedsupport)<br />            this.$control.css({opacity:0})<br />        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)<br />        if (typeof dest=="string" && jQuery('#'+dest).length==1) <br />            dest=jQuery('#'+dest).offset().top<br />        else<br />            dest=0<br />        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);<br />    },<br />    keepfixed:function(){<br />        var $window=jQuery(window)<br />        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx<br />        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety<br />        this.$control.css({left:controlx+'px', top:controly+'px'})<br />    },<br />    togglecontrol:function(){<br />        var scrolltop=jQuery(window).scrollTop()<br />        if (!this.cssfixedsupport)<br />            this.keepfixed()<br />        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false<br />        if (this.state.shouldvisible && !this.state.isvisible){<br />            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])<br />            this.state.isvisible=true<br />        }<br />        else if (this.state.shouldvisible==false && this.state.isvisible){<br />            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])<br />            this.state.isvisible=false<br />        }<br />    },<br />  <br />    init:function(){<br />        jQuery(document).ready(function($){<br />            var mainobj=scrolltotop<br />            var iebrws=document.all<br />            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode<br />            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')<br />            mainobj.$control=$('<div id="topcontrol"> '+mainobj.controlHTML+'</div> ')<br />                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})<br />                .attr({title:'Scroll Back to Top'})<br />                .click(function(){mainobj.scrollup(); return false})<br />                .appendTo('body')<br />            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks<br />                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi<br />            mainobj.togglecontrol()<br />            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){<br />                mainobj.scrollup()<br />                return false<br />            })<br />            $(window).bind('scroll resize', function(e){<br />                mainobj.togglecontrol()<br />            })<br />        })<br />    }<br />}<br />scrolltotop.init()<br /></script></span></div> </blockquote>

Keterangan : 

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

- scrollto: Integer, tujuan scroll setelah tombol diklik. Nilai 0 (dalam pixel) seperti default di atas berarti scroll akan kembali ke bagian paling ujung atas (titik nol). Menambah nilainya berarti akan menurunkan titik tujuan scroll.

- scrollduration: kecepatan/durasi scroll (dalam miliseconds), semakin tinggi nilainya, semakin lambat. Default adalah 1000 (1 detik).

- fadeduration: kecepatan/durasi fading (dalam miliseconds), nilai pertama adalah nilai fade in, yang kedua adalah nilai fade out. Nilai default di atas adalah 500 dan 200.

- offsetx: nilai posisi x tombol back to top (dalam pixel), semakin ditambah semakin menjorok ke dalam. Default 5.

- offsety: nilai posisi y tombol back to top (dalam pixel), semakin ditambah semakin menjorok ke atas. Default 5.

- Pada tulisan yang berwarna merah ganti dengan alamat url gambar anda.

 7. Simpan

Selesai

Semoga Berhasil dan Semoga Bermanfaat