Membuat Tombol Back To Top Dengan SVG

Apa kabar sobat setia GoSEO.id? Semoga kita semua diberi kesehatan dan terhindar dari wabah penyakit yang saat ini sedang menimpa secara global di berbagai negara termasuk Indonesia. 

 

Saya pun mulai jarang mengupdate artikel dikarenakan beberapa hari belakang mempunyai aktivitas lain yang wajib saya kerjakan.

Oleh karena itu, berhubung saya juga sedang punya kesempatan. Maka GoSEO.id pada kali ini akan membagikan tips "Membuat Tombol Back To Top Dengan SVG". Yang mana mungkin sobat sudah pada yang tahu bahwa fungsi Back To Top adalah memudahkan pengunjung untuk kembali ke halaman paling atas secara instan tanpa perlu melakukan scroll halaman secara manual.

Bagi sobat yang ingin menggunakan Back To Top dengan SVG, mari ikuti tahapan berikut ini :

Membuat Tombol Back To Top Dengan SVG

1. Pertama, silahkan buka akun blogger.com milikkmu. 
2. Kemudian masuk ke menu Tema ➠ lalu klik tombol Edit HTML.
3. Selanjutnya tambahkan kode dibawah ini dan letakkan tepat diatas </head>.
   

   <style>
   /* Back To Top */

masukkan script iklan disini

.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style>

Kemudian copy kode dibawah ini dan pastekan diatas </body>.

<div class='backtotop hide'><svg viewBox='0 0 24 24'>
  <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div>
<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>

Terakhir klik tombol Simpan dan Selesai.