Edit: Untuk versi yang lebih mudah dapat Anda baca di sini
Smooth scroll back to top, yakni sebuah alternatif lain selain pembuatan elemen back to top biasa yang hanya akan mengantarkan Anda menuju ke atas saja tanpa adanya pinjaman dampak cantik. Untuk menciptakan tombol back to top biasa caranya sangat sederhana, yaitu dengan cara menciptakan sebuah tag hyperlink yang mempunyai nilai
href="#", sekedar untuk mengarahkan Anda ke atas. Intinya adalah, setiap kali Anda menciptakan sebuah link kosong, maka link tersebut secara otomatis akan membawa Anda menuju ke atas setiap kali Anda mengekliknya, ibarat ini: <a href='#'>Back to Top</a>Tapi jikalau situs Anda sudah dilengkapi dengan JQuery, kenapa masih mencoba untuk memakai cara lama? Padahal sebuah paket JQuery dapat saja menciptakan puluhan dampak dengan cara yang sangat singkat. Anda dapat melihat cara kerja sistem ini dengan mengeklik tombol di bawah ini:
Untuk membuatnya, pertama-tama masuklah ke Tab Rancangan kemudian tambahkan sebuah elemen halaman HTML/JavaScript:
Salin isyarat di bawah ini, kemudian letakkan ke dalam formulirnya:
<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> <!-- Sumber kode: http://www.dynamicdrive.com -->Klik Simpan.
Kode yang Saya beri warna merah yakni JQuery, jikalau template Anda sudah dilengkapi dengan JQuery, Anda boleh membuang script tersebut. Sedangkan isyarat yang Saya beri warna biru yakni alamat berkas gambar. Jika Anda menghendaki tampilan tombol back to top yang berbeda, Anda dapat mengganti URL tersebut dengan URL gambar-gambar di bawah ini. (Klik pada gambar yang dikehendaki kemudian salin URL yang tampil pada address bar untuk menggantikan URL tersebut):
