Membuat tombol back to top dengan efek : lengkap

Tombol back to top atau tombol kembali keatas, adalah sebuah fasilitas yang bisa kita pasang pada halaman situs atau blog dalam bentuk sebuah tombol yang berfungsi untuk kembali ke halaman paling atas ketika tombol tersebut kita tekan, tujuannya adalah untuk memudahkan pengunjung apabila mereka memutuskan untuk kembali melihat atau menuju ke titik awal halaman, dengan adanya fasilitas tombol back to top, dan dengan menekannya maka para pengunjung dengan mudah akan dibawa kembali ke titik awal halaman secara otomatis (halaman menggulung atau bergulir sendiri), dan ini sangat efektif jika dibandingkan halaman tersebut harus di scroll atau digulung secara manual.

Cara kerja tombol back to top atau tombol kembali keatas

Pada umumnya tombol back to top atau tombol kembali keatas akan berfungsi dan secara otomatis muncul untuk kita klik ketika isi artikel sudah melebihi batas tinggi layar monitor, artinya tombol back to top akan muncul untuk memfasilitasi artikel atau halaman yang sangat panjang, sehingga ketika sudah melebihi batas layar, tombol back to top akan muncul secara otomatis dan siap kita klik itu juga seandainya kita memutuskan untuk kembali ka batas atas halaman, namun untuk halaman pendek dan kurang dari ukuran tinggi layar tombol back to top tidak akan muncul, letak tombol back to top biasanya dipasang dan muncul di sudut kanan batas bawah halaman.


Seiring dengan kreatifitas para blogger, saat ini banyak tersedia blog-blog yang menyajikan cara pemasangan atau pembuatan tombol back to top dengan berbagai macam efek yang kelihatan keren dan mengagumkan, ada yang dibuat cukup sederhana tanpa efek sedikitpun, kemudian ada juga efek scroll, efek geser, efek bounce bahkan sampai efek fadding juga efek smoth, dan mungkin juga akan muncul efek-efek lainnya seiring dengan kreativitas para blogger yang inovatif.

Untuk membuat tombol back to top memerlukan script CSS HTML Javascript atau JQuery

Perlu kita ketahui untuk membuat atau memasang tombol back to top atau tombol kembali keatas pada blog yang kita miliki, tidak akan lepas dari yang namanya bahasa pemrograman web, biasanya pembuatan fasilitas widget tidak akan lepas dari 3 bahasa pemrograman yaitu CSS, Javascript atau Framework JQuery dan script HTML, ketiga bahasa tersebut berkolaborasi  sesuai dengan fungsinya masing-masing untuk menciptakan fasilitas widget keren yang bisa kita pasang pada blog baik itu blog berflatform blogspot maupun wordpress atau halaman situs pribadi.

Ketiga kode script tersebut memang memiliki fungsi masing-masing, Script HTML untuk mendefinisikan tag tag html sebagai pembungkus atau fondasi web yang akan dimanipulasi, script CSS untuk mendekorasi dan megatur tata letak setiap tag HTML yang kita definisikan, sedangkan javascript atau jquery adalah untuk membuat tampilan lebih interaktif.

Cara Membuat tombol Back to top dengan berbagai efek yang bisa anda pilih

pada artikel kali ini akan dibahas mengenai cara membuat atau memasang dan memunculkan tombol back to top atau tombol kembali ke atas dengan beberapa efek lengkap sebagai berikut:

1. Cara Membuat tombol back to top dengan efek memantul (bounce)

Efek bounce artinya efek seperti bola memantul, ketika layar di gulung dan sudah sampai pada titik awal halaman, ada sedikit efek seperti pantulan bola, untuk menerapkannya silahkan ikuti langkah berikut:

a. Masuk ke template blog anda, cari kode </head> simpan kode berikut tepat diatas </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Kode diatas adalah framework jquery, jika didalam template anda belum dilibatkan kode jquery, silahkan letakan kode diatas, jika sudah anda bisa lewati

b. Buat widget baru, pilih widget untuk HTML/javascript kemudian kopikan kode berikut dan simpan

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8HKVtKaGLIFaMaZfqOjjmr6JI2y8LAu6a4dhs2tp99wnQ0sXMCJ08CrKrK-Ns1nSIGpNa1h-YRsZcSnye3P_0aoz8shiL6A7eeGgBw8_yWCwDHCVBkah_T2mnh8hZ9HrpXQ-U719lna1C/s1600/arrow-up_basic_blue.png'/></div> 

c. Kopikan kode javascript jquery berikut diatas kode </head> juga

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

2. Membuat tombol back to top dengan efek geser yang halus keatas

untk membuat tombol back to top yang memiliki efek geser keatas secara halus ikuti langkah berikut:

a. Masuk ke template blog anda, cari kode </head> simpan kode berikut tepat diatas </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

b. Masih diatas kode </head> letakan juga kode berikut tepat diatasnya, pada kode dibawah ini anda bisa ubah angka 500 untuk letak tombol dan angka 700 anda bisa ganti untuk kecepatan

<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>

c. Buat widget baru, pilih widget untuk HTML/javascript kemudian kopikan kode berikut dan simpan

<style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8HKVtKaGLIFaMaZfqOjjmr6JI2y8LAu6a4dhs2tp99wnQ0sXMCJ08CrKrK-Ns1nSIGpNa1h-YRsZcSnye3P_0aoz8shiL6A7eeGgBw8_yWCwDHCVBkah_T2mnh8hZ9HrpXQ-U719lna1C/s1600/arrow-up_basic_blue.png'/></div>

3. Membuat tombol back to top dengan efek Fading dan smooth

Efek fading & smooth adalah, visibilas objek yang muncul atau hilang secara halus, atau dikenal dengan sebutan fade in atau fade out, untuk membuat tombol back to top dengan efek fading dan smooth ikuti langkah berikut:

a. Masuk ke template blog anda, cari kode </head> simpan kode berikut tepat diatas </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> 

anda bisa lewati peletakan kode diatas jika dalam blog anda sudah terdapat  jquery


b. Ggunakan gadget HTML/Javascript lalu kopikan script dibawah ini kemudian jangan lupa untuk disimpan

var scrolltotop={  
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]}, 
    controlHTML: '<img src="URL Gambar Back To Top" />', 
    controlattrs: {offsetx:5, offsety:5}, 
    anchorkeyword: '#top',
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){ 
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) 
        if (typeof dest=="string" && jQuery('#'+dest).length==1)  
            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()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks 
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
            mainobj.togglecontrol() 
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ 
                mainobj.scrollup() 
                return false 
            }) 
            $(window).bind('scroll resize', function(e){ 
                mainobj.togglecontrol() 
            }) 
        }) 
    } 
}
scrolltotop.init()
</script>

Pada script diatas silahkan anda ganti tulisan "URL Gambar Back to Top" dengan lokasi gambar back to top yang anda miliki atau ganti aja dengan url gambar berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8HKVtKaGLIFaMaZfqOjjmr6JI2y8LAu6a4dhs2tp99wnQ0sXMCJ08CrKrK-Ns1nSIGpNa1h-YRsZcSnye3P_0aoz8shiL6A7eeGgBw8_yWCwDHCVBkah_T2mnh8hZ9HrpXQ-U719lna1C/s1600/arrow-up_basic_blue.png

Baca juga: Cara membuat widget like facebook melayang ala strukturkode 

Demikian yang bisa saya share tentang Cara Membuat tombol back to top dengan berbagai Pilihan efek lengkap, selamat mencoba dan semoga bermanfaat.