Saturday, August 4, 2012

Cara Membuat Tombol Back to Top

Akhirnya dapat ide post, walaupun post kali ini sudah tidak asing lagi di mata para blogger, terutama para master2 seperti DTE :] dll. Saya dapatkan trik ini dari blog DTE :] tersebut. Mungkin buat yang belum tahu apa itu Tombol Back to Top pada blog. Tombol Back to Top pada blog yaitu tombol yang akan muncul ketika blog kita atau blog yang kita kunjungi pada saat di scroll ke bawah dan untuk  Tombol Back to Top yang satu ini menggunakan script. Apakah itu JQuery atau cuman Javascript biasa saya kurang tahu sehingga pada saat tombol di klik maka scroll halaman akan kembali ke atas dengan efek smooth. Kurang lebih seperti itulah.
Adapun cara pemasangannya dengan menyalin kode berikut dan meletakkannya di dalam form HTMl/javascript di menu "Tambah Gadget" lalu simpan.

<script type="text/javascript"> 
var scrolltotop={setting:{startline:100,scrollto:0,scrollduration:1e3,fadeduration:[800,100]},controlHTML:'<img src="http://4.bp.blogspot.com/-jqnu-lpoKyw/Tj98e4pj8eI/AAAAAAAAAkI/Idt4nuGUoIs/s1600/arrowTop.png" style="border:0;background:transparent;padding:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;" />',controlattrs:{offsetx:5,offsety:5},anchorkeyword:"#top",state:{isvisible:false,shouldvisible:false},scrollup:function(){if(!this.cssfixedsupport)this.$control.css({opacity:0});var a=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);if(typeof a=="string"&&jQuery("#"+a).length==1)a=jQuery("#"+a).offset().top;else a=0;this.$body.animate({scrollTop:a},this.setting.scrollduration)},keepfixed:function(){var a=jQuery(window);var b=a.scrollLeft()+a.width()-this.$control.width()-this.controlattrs.offsetx;var c=a.scrollTop()+a.height()-this.$control.height()-this.controlattrs.offsety;this.$control.css({left:b+"px",top:c+"px"})},togglecontrol:function(){var a=jQuery(window).scrollTop();if(!this.cssfixedsupport)this.keepfixed();this.state.shouldvisible=a>=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(a){var b=scrolltotop;var c=document.all;b.cssfixedsupport=!c||c&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest;b.$body=window.opera?document.compatMode=="CSS1Compat"?a("html"):a("body"):a("html,body");b.$control=a('<div id="topcontrol">'+b.controlHTML+"</div>").css({position:b.cssfixedsupport?"fixed":"absolute",bottom:b.controlattrs.offsety,right:b.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"Kembali ke Atas"}).click(function(){b.scrollup();return false}).appendTo("body");if(document.all&&!window.XMLHttpRequest&&b.$control.text()!="")b.$control.css({width:b.$control.width()});b.togglecontrol();a('a[href="'+b.anchorkeyword+'"]').click(function(){b.scrollup();return false});a(window).bind("scroll resize",function(a){b.togglecontrol()})})}};scrolltotop.init();
</script> 
<!-- Sumber kode: http://www.dynamicdrive.com -->

11 comments:

  1. kirain demonya seperti pada gambar.. eh gambarnya mirip sama blog ini ya sob.. hehehe :-d

    ReplyDelete
  2. ak pengen yang pake symbol, bukan img caranya gmn? =D

    ReplyDelete
  3. saya sering nemu, tapi lupa nyari. eh ketemu di sini. tenkyu nie... simpen dulu, buat lain kali biar ga bingung.

    ReplyDelete
  4. wooww.... keren2.... sipp dah kawan...

    ReplyDelete
  5. Ane belum buat sob. hehe mungkin nanti kalo dirasa butuh bisa balik lagi dimari hehe B)

    ReplyDelete
  6. saya lihat ini pakai jQuery sob ,,,
    namun saya pengennya lengkap sob, ada back to down nya juga :) tapi sampai saat ini belum ketemu...

    wilujeng ngeblog

    ReplyDelete
  7. ini nihh udah pake scrip keren dahhh

    kalo mau simpelnya orang cuma gini doang
    <a href='http:#'

    ReplyDelete
  8. saya mau pasang di wp.. gak ngerti caranya mas ;(

    ReplyDelete