Your Adsense Link 728 X 15

Smooth Scroll Back To Top dengan JQuery

Posted by Achmad Zaelani Kamis, 12 Juli 2012 0 komentar
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>
  • Untuk Menyisipkanya, Pertama tama masuklah ke Tab Rancangan Kemudian Tambahkan Sebuah Elemen halaman HTML/JavaScript:


Salin kode 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 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): 


dan masih banyak lagi gamabar yang lainya maaf ya cuma memberi contoh gambar 3 saja ..





0 komentar:

Posting Komentar

Statistik Blog

Follow Me

Link Partner

Follow Via Email

Berlangganan Artikel Via Email