Cara Membuat Tombol Back To Top efek Scroll - Tombol Back To Top 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 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.
Sebelumnya diartikel ini akan di share Tips Mudah Membuat Tombol Share Di Blog, Berikut Cara Membuat Tombol Back To Top Efek Scroll
Log in to akun Blogger
Tata letak >>> tambahkan Gadget
Copy kode berikut lalu Paste pada HTML/JavaScript
Kode script I - Cara Membuat Tombol Back To Top Efek Scroll Lembut
berikut kodenya
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNdyfdQjVfuoJcnQUH7ICt90UGiDxnWimXm8619J2f4m8xtxuUSm1xs1cOW8eGMQUmOXbw8n2yKQlrT2vzdXeRMzI4O0nk9mlahHi6VYxz8ytyV38MXezPKSHiR_N1-bpaT9KZJq7_gJ8/s1600/TO-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:'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 - Silahkan sesuaikan gambar Tombol Back To Top dengan selera anda, ganti kode yang berwarna MERAH dengan Url gambar berikut :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwmjLmZFJGFzghUuqRPTyFc9sA_5hYIaXPCVnlyVTJC1n8lLCxyX9hYwh8iwdF_0i2OCR94R61JchLKaABnZ3gpHTfK-IWP7Jeaa1uBnREpU0rt8zjNGCSkijNFJFlMYpHVex2yBkKtYLv/s1600/back+to+top10.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-y1CKgJNnzNmjEL-Orq3NNsHXioj6iwqjtpyPRx44e-p5kxhxqWocJ_LVbH0XrGEoloRcZRMs7dSVCaAgLspkPtebehSVS1QT8uqwSa0K3nwdpWErr9lTYhwnoXatmV4HhDO86G3Rz7gK/s1600/back+to+top15.png
>>>SELAMAT MENCOBA<<<
