Tuesday, August 25, 2015

Memasang Tombol Back to Top dengan jQuery UI

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.