Smooth scroll back to top, adalah sebuah alternatif lain selain pembuatan elemen back to top biasa yang hanya akan mengantarkan Anda menuju ke atas saja tanpa adanya pemberian efek cantik. Untuk membuat tombol back to top biasa caranya sangat sederhana, yaitu dengan cara membuat sebuah tag hyperlink yang memiliki nilai
href="#", sekedar untuk mengarahkan Anda ke atas. Intinya adalah, setiap kali Anda membuat sebuah link kosong, maka link tersebut secara otomatis akan membawa Anda menuju ke atas setiap kali Anda mengekliknya, seperti ini:<a href='#'>Back to Top</a>
Tapi jika situs Anda sudah dilengkapi dengan JQuery,
kenapa masih mencoba untuk menggunakan cara lama? Padahal sebuah paket
JQuery bisa saja membuat puluhan efek dengan cara yang sangat singkat.
Untuk membuatnya, pertama-tama masuklah ke Tab Rancangan kemudian tambahkan sebuah elemen halaman HTML/JavaScript:
Salin kode di bawah ini, kemudian letakkan ke dalam formulirnya:
Klik Simpan.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"/>
<script type="text/javascript">
var scrolltotop={setting:{startline:100,scrollto:0,scrollduration:1e3,fadeduration:[500,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>
Kode yang Saya beri warna merah adalah JQuery, jika template Anda sudah dilengkapi dengan JQuery, Anda boleh membuang script tersebut. Sedangkan kode yang Saya beri warna biru adalah alamat berkas gambar. Jika Anda menghendaki tampilan tombol back to top
yang berbeda, Anda bisa mengganti URL tersebut dengan URL gambar-gambar
di bawah ini. (Klik pada gambar yang dikehendaki lalu salin URL yang
tampil pada address bar untuk menggantikan URL tersebut):
Author : Edu Themes
Tutorial EDU Themes ini secara special dipersembahkan khusus untuk semua klien EDU Themes. Besar harapan kami juga blog ini akan mampu menuntun sekaligus mempertajam kemampuan teman-teman pasca Pelatihan bersama Kami. Terimakasih atas kunjungannya yang baru saja membaca artikel berjudul Smooth Scroll Back To Top dengan JQuery.