Membuat Tombol Back To Top Dengan SVG

Usuluddin, S.Kom    Senin, Maret 16, 2020    TUTORIAL   

Membuat Tombol Back To Top Dengan SVG

GoSEO.id - 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 */
   .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>

4. 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>

5. Terakhir klik tombol Simpan dan Selesai.

Sekian dulu tips hari ini tentang "Membuat Tombol Back To Top Dengan SVG". Semoga artikel ini bermanfaat. Silahkan tinggalkan komentar jika ada bagian yang tidak kamu mengerti. Jangan lupa pula untuk share dan masukkan email kamu pada kolom Newsletter untuk mendapatkan update-an / informasi artikel kami. Terima kasih sudah hadir dan membaca artikel ini.