Cara Membuat Butang Back To Top Dengan Efek Animasi Roket

Assalamualaikum, Kali ini saya akan kongsikan cara membuat butang back to top dengan efek animasi roket khas buat pengguna blogger dan cara ini juga befungsi di mana mana website yang menggunakan html,php,js. Cara ini sangat simple dan sangan ringan.

Butang back to top ini akan memudahkan para pembaca untuk kembali ke halaman atas dengan hanya one click back to top, Cara ini sangat membantu para blogger yang mempunyai content yang panjang lebar hihi.

Butang back to top yang saya akan kongsikan ini khas buat non amp sahaja, sekiranya anda menggunakan amp dan memerlukan cod untuk back to top khas buat amp, silakan tinggalkan comment anda, saya akan membuatkan code khas buat pengguna amp.

Ok berbalik ke topik asal berkaitan cara membuat butang back to top.

Cara pemasangan

Login ke blogger anda dan tab Theme > HTML Editor cari code style anda dan tambahkan css style berikut :

/* Back to top By Onet4u.com */
#back-to-top{color:#fafafa}
.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:998}
.back-to-top:hover svg{transform:rotate(-45deg);margin:-1px}
.back-to-top:hover svg path{fill:#21ef8b}
.back-to-top svg{width:34px;height:34px;transition:transform .25s ease-out}
.tutop{color:#fafafa;font-size:1.4em;width:45px;height:45px;border-radius:100px;border:none;outline:0;background:#332d4f;z-index:999;bottom:20px;right:20px;padding:6px 9px;cursor:pointer}

Selanjutnya pasangkan code berikut di bawah footer blogger anda.

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<button class='tutop'><svg viewBox='0 0 29 24'>
<path d='M2.81,14.12L5.64,11.29L8.17,10.79C11.39,6.41 17.55,4.22 19.78,4.22C19.78,6.45 17.59,12.61 13.21,15.83L12.71,18.36L9.88,21.19L9.17,17.66C7.76,17.66 7.76,17.66 7.05,16.95C6.34,16.24 6.34,16.24 6.34,14.83L2.81,14.12M5.64,16.95L7.05,18.36L4.39,21.03H2.97V19.61L5.64,16.95M4.22,15.54L5.46,15.71L3,18.16V16.74L4.22,15.54M8.29,18.54L8.46,19.78L7.26,21H5.84L8.29,18.54M13,9.5A1.5,1.5 0 0,0 11.5,11A1.5,1.5 0 0,0 13,12.5A1.5,1.5 0 0,0 14.5,11A1.5,1.5 0 0,0 13,9.5Z' fill='#fff'></path>
</svg></button></a></div>

Selanjtnya kita akan memasang javascript di atas code /body, Pasangkan code berikut tepat di atasnya.

<script type='text/javascript'>
//<![CDATA[
// To Top By Onet4u.com
$(window).scroll(function(){200<$(this).scrollTop()?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").hide().click(function(){return $("html, body").animate({scrollTop:0},1e3),!1});
//]]>
</script>

Sekiranya anda mempunyai butang back to top asal, silakan padam semua code dan css sebelum memasang code ini

Setelah selesai memasang semua code di atas silakan simpan template anda, dan lihat hasilnya.

• Demo

You can get quicker updated data on new post via our social media account. Like US on Facebook or subscribe your email to our newsletter. Please don't hesitate to send the US any question or write a message within the comment section below this text. Share the US your opinion or your experience! Thanks.

Liked this post? Use the buttons below to share it together with your friends.