Memasang Tombol Back to Top dengan jQuery UI - Pada kesempatan kali ini akan menyebarkan cara memasang sebuah tombol back to top yang sahabat sudah tidak absurd lagi dengan embel-embel pengaruh jQuery UI.
Pada artikel yang kemudian Saya pernah menyebarkan 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 isyarat 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 isyarat 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 pengaruh bounce, silakan tambahkan isyarat 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 pengaruh lain, silakan kunjungi http://easings.net kemudian ganti isyarat yang ditandai dengan nama pengaruh yang tersedia.
Demikian mengenai Cara Memasang Tombol Back to Top dengan jQuery UI. Semoga bermanfaat.