Membuat Tombol Back To Top Roket Meluncur

Membuat Tombol Back To Top Roket Meluncur - Pada artikel sebelumnya saya juga pernah berbagi tutorial tentang Cara Memasang Bounce Back To Top yang berfungsi untuk memudahkan pengunjung blog kita jika ingin kembali ke halaman paling atas dengan hanya mengklik satu tombol.

Nah, artikel kali ini juga masih tentang Tombol Back to Top, hanya saja yang membedakan tombol back to top yang pernah saya bagikan sebelumnya. Tombol Back to Top kali ini menggunkan Gambar Roket yang meluncur dan diberi sedikit sentuhan animasi efek Api saat tombol kita klik. Bagi anda yang ingin mencobanya, silahkan ikuti langkah-langkahnya dibawah ini:

1. Masuk ke Blogger > Klik Template > Edit HTML > Kemudian copy paste kode dibawah ini dan letakkan di Atas tag ]]></b:skin> atau </style>

 /* Back to Top Roket meluncur */
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)} 

Untuk kenyaman, Simpan gambar Roket di Direktori masing-masing:

 http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png 

2. Selanjutnya, salin kedua kode dibawah ini dan letakkan tepat di Atas tag </body>

 <a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a> 

 <script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script> 

3. Terakhir simpan template dan lihat hasilnya.

Demo click to begin

Bagaimana? Mudah bukan cara penerapannya dan hasilnya juga sangat menarik bukan. Semoga artikel kali ini tentang Membuat Tombol Back To Top Roket Meluncur dapat bermanfaat untuk anda. Sampai Jumpa. :)

Source: http://arlinadesign.blogspot.com/2015/06/tombol-back-to-top-roket-meluncur.html