Cara Membuat Tombol Back To Top Efek Scroll Cepat Di Blog

Hai gan ketemu lagi ni.walaupun gx sengaja ketemu nya.Ok gan kali ini dan mungkin lain kali gx lagi saya akan nge-share tentang Cara Membuat Tombol Back To Top Efek Scroll Cepat Di Blog ada juga Cara Menambahkan Tombol Back To Top Efek Scroll Lembut Di Blog yang biasanya berupa gambar panah menuju keatas yang terletak dibawah blog merupakan salah satu widget yang dapat membantu pengunjung untuk lebih mudah kembali keatas halaman page. Dengan Membuat Tombol Back To Top (Kembali Ke Atas) sangat membantu untuk bergerak cepat kembali pada artikel yang Paling diatas, sehingga kita tidak perlu lagi menggunakan fungsi scroll mouse untuk melihat halaman yang telah terlewat.

Nah..!! jika saat ini anda berada pada halaman komentar dan ingin melihat atau membaca ulang artikel yang anda kunjungi, cukup KLIK Tombol Back To Top, maka anda akan diarahkan kehalaman Title Judul Blog atau Header.
Akan tetapi kalau artikel blog  cukup pendek mungkin Tombol Back To Top (Kembali Ke Atas)ini sedikit tidak berlaku, namun jika terkadang artikel blog  kita cukup panjang tentu Tombol Back To Top sangat dapat membantu.

Ok gan Langsung aja

, Berikut Cara Menambahkan Tombol Back To Top Efek Scroll Lembut Di Blog

1. Log in to akun Blogger
2. Tata letak >>> tambahkan Gadget
3. Copy kode berikut lalu Paste pada HTML/JavaScript

Kode script  - Cara Membuat Tombol Back To Top Efek Scroll Cepat

<br /><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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWXfOpbbgM_4rxJkcwcBFXFMQomaaufDRBavAsh4EIVblLzhg6FDYtENrTHRUyQUhyphenhyphenFjFX8ZHt1T2qbGU6PQ6228wPsjyUZJryMLBF9SBUo8j_UJjVYq-4hExSe55bTcChvuLmhbTjwh_5/h120/Back+Top.png" />', //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:'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 kode yang berwarna MERAH dengan Url gambar Seelera agan.
Kunjungi juga : Cara Menambahkan Tombol Back To Top Efek Scroll Lembut Di Blog

Selamat Mencoba...