Smooth Scroll Back To Top dengan JQuery

Edit: Untuk versi yang lebih praktis bisa Anda baca di sini
smooth scroll jquery

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. Anda bisa melihat cara kerja sistem ini dengan mengeklik tombol di bawah ini:

Lihat Demo

Untuk membuatnya, pertama-tama masuklah ke Tab Rancangan kemudian tambahkan sebuah elemen halaman HTML/JavaScript:

widget 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):

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top

scroll back to top









































































5 Komentar

  • tes

    maaf gan , pertanyaan saya kali ini agak ngak nyambung , saya mau bertanya apakah sekarang kode jquery tertentu tidak support dengan perambaan mozilla dan google , contoh saja widget panel slide , recent post dengan banyak pilihan dll :(

  • asem asem

    ane tertarik versi yg sebelumnya, krnb lebih sederhana mnurut ane. 0:)

  • Unknown

    saya sudah menerapkan cara ini, tapi jquery nya tidak berfungsi pada halaman yg blm ada komentarnya ?, coba dilihat dibawah pesan formulir komentar, untuk lebih jelasnya buka ini sob: http://yoga-tc.blogspot.com/2013/12/download-ebook-tutorial-microsoft-office-word-2007-gratis-terbaru-2014-lengkap.html balas ya mas, PENTING

  • Taufik Nurrohman

    Elemen #top-yeah tidak pernah ada. Jadi tombol tersebut juga tidak akan pernah muncul.

  • Ghufroni Sholih

    mas , jika saya mau membuat satu tombol back to top menjadi 2 fungsi (to top dan to down) , namun hanya menggunakan 1 event yaitu onclick atau click saja (bukan click dan dblclick) , bisa apa ga mas ? misalnya dengan memanfaatkan posisi window gitu, kalau bisa minta scriptnya mas hehe oiya tombolnya fixed mas :D

Komentar telah ditutup.