Cara Membuat Smooth Back to Top Button

Jika tampilan blog/situs Anda terlalu panjang ke bawah yang mungkin disebabkan karena artikelnya terlalu panjang atau isi blog Anda terlalu banyak. Jika pengunjung blog Anda sudah mencapai akhir halaman, dan jika mereka ingin kembali ke awal halaman (halaman atas) tentu saja mereka harus scroll-up ke atas. Hal ini kadangkala akan menyebabkan pengunjung blog/situs Anda jengkel karena terlalu lama harus menscroll-up dan akhirnya dengan rasa jengkel mereka akan meninggalkan blog/situs Anda.

Untuk mengatasi hal tersebut diatas, Anda bisa menyediakan Smooth Back to Top Button. Jadi pengunjung blog Anda tinggal klik sebuah tombol untuk kembali ke awal halaman dengan nyaman. Dan tentu saja blog/situs Anda akan kelihatan lebih keren dan professional.

Anda bisa lihat Smooth Back to Top Button di blog ku ini, cobalah Anda scroll ke bawah. ketika sampai di bawah halaman akan muncul sebuah tanda panah keatas. Nah... jika Anda ingin kembali ke atas halaman, Anda tinggal klik saja tombol tanda panah itu, sudah dicoba? Kalau sudah, keren kan?

Cara membuat Smooth Back to Top Button sebagai berikut:

1. Login dulu ke blogger.com
2. Pilih Design
3. Pilih Page Elements
4. Klik Add a Gadget (untuk menambah Gadget baru)
   
5. Copy+Paste script dibawah ini ke dalam gadget
6. Klik SAVE

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.MyBloggerTricks.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
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/AVvXsEhRRmP6j53qjdtUZ9onX6EfS2TuADL-LKr5EpL2nhuzIG0ajhL6oL5fu2_1t_g4BjRKZatIPySYN3Ec9-JEkjzsOSLhSXA3r6mH2Ej5jLqlDqahEXggCgpQwCsIbZSyOWZHHuLfXmCI2H0/s1600/Back-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
inobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

Gambar tanda panah ke atas yang ada di script diatas adalah seperti yang Anda lihat di blog ku ini. Jika Anda kurang/tidak menyukainya Anda bisa upload sendiri gambar Anda ke server gratis dan gantilah url gambar diatas (saya beri warna merah) dengan url gambar Anda sendiri.

Anda bisa mencarinya via mbah Google Search dengan kata kunci free arrow up icon set, jika sudah ketemu dengan tanda panah ke atas yang Anda sukai pilihlah tipe file gambar PNG, download gambarnya dan upload ke server Anda.

Selamat mencoba!
Silahkan berikan comment Anda tentang artikel Cara Membuat Smooth Back to Top Button ini.