Memasang Tombol Back to Top dengan jQuery UI

8/25/2015
Memasang Tombol Back to Top dengan jQuery UI

Memasang Tombol Back to Top dengan jQuery UI - Pada kesempatan kali ini Arlina Design akan berbagi cara memasang sebuah tombol back to top yang sobat sudah tidak asing lagi dengan tambahan efek jQuery UI.

Pada artikel yang lalu Saya pernah berbagi tutorial terkait tombol back to top ini :

Baca juga : Tombol Back to Top Roket Meluncur dan Memasang Smooth Back to Top di Blog

Bagi yang ingin mencobanya, silakan ikuti langkah berikut :

Catatan : Jika di template blog sudah terpasang tombol back to top, silakan hapus terlebih dahulu tombol tersebut.

1. Login ke Blogger > Template > Edit HTML > Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>

/* Back to top */
#easy-top{background:rgba(0,0,0,.5);text-align:center;position:fixed;bottom:15px;right:15px;cursor:pointer;width:38px;height:38px;line-height:38px;border-radius:4px;padding:4px;display:none;-webkit-transform:translateZ(0);box-sizing:initial;transition:all .3s ease-out}#easy-top:hover{background:rgba(0,0,0,.9)}#easy-top:before,#easy-top:after{-webkit-backface-visibility:hidden;box-sizing:initial;}#easy-top:before{content:'';height:8px;width:8px;display:block;border:3px solid #fff;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:15px;left:18px}#easy-top:after{content:'';height:16px;width:3px;display:block;background:#fff;position:absolute;top:17px;left:22px}#easy-top:hover:after{border-color:transparent transparent rgba(0,0,0,.9)transparent}

2. Selanjutnya, tambahkan kode di bawah ini sebelum </body>

<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutQuint"})})});
//]]>
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>

3. Simpan template dan lihat hasilnya.


Jika ingin memasang tombol back to top dengan efek bounce, silakan tambahkan kode di bawah ini :

<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutBounce"})})});
//]]>
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>

Untuk mengganti dengan efek lain, silakan kunjungi http://easings.net kemudian ganti kode yang ditandai dengan nama efek yang tersedia.



Demikian mengenai Cara Memasang Tombol Back to Top dengan jQuery UI. Semoga bermanfaat.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

15 comments

Mbak kalau bisa ada penjelasannya juga, biar bisa sambil belajar koding, cuman saran :D

Balas

Penjelasan tentang apa? Di sini saya hanya berbagi cara memasangnya saja

Balas

Unfortunately did not work for me! ;(

This is my blog: templatechicago . blogspot . com

Balas

Kalau dilihat efeknya dari Tombol Back to Top-nya keren juga tuh :)

Balas

keren tombolnya mbak, bisa membuat dunia berguncang. hehe.

Balas

nice i want acounte you in Facebook man

Balas

Efek bouncenya keras banget ya Mbak ? beda sama Tombol back to top di blog lain :-)
Pengen masang di blog sih yang efek bounce tapi bikin blog tambah berat :p

Balas

Make sure to add jquery library in your template

Balas

Iya sob, banyak pilihan efeknya

Balas

You can add our fan page

Balas

Mungkin ini salah satu solusi tinggal menulis nama efek biar lebih praktis

Balas

How to increase the speed?

Balas

You can change this code with your value, like 300 as 3 second

duration:2e3,

Balas

Cara ganti icon arrow nya gimana ya?

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.