-->
Cara Memasang Tombol Back To Top Dengan SVG

Cara Memasang Tombol Back To Top Dengan SVG

Back To Top merupakan tombol yang memudahkan pengunjung blog untuk kembali ke atas secara instan tanpa harus scroll halaman secara manual. Tombol ini benar-benar berguna sekali jika pengunjung sedang membaca artikel yang isinya panjang sekali dan ingin kembali ke menu atas secara instan.

Kita akan membuat tombol Back To Top dengan menggunakan icon SVG. Jadi, situs atau blog kalian tetap memiliki loading yang cepat dibandingkan menggunakan Font Awesome.

Pasti kalian sudah mengerti kan? Nah, mari kita langsung saja ke tutorialnya.

Memasang Tombol Back to Top

1. Letakkan kode di bawah ini tepat di atas </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>

2. Kemudian tambahkan kode di bawah ini sebelum </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>

3. Kalian Simpan dan lihatlah hasilnya.

Penutup

Semoga artikel pendek ini bisa memberikan manfaat kepada kalian semua dan jika ada yang ingin ditanyakan silakan berkomentar di bawah

Seorang Blogger Pemula yang sedang belajar
  • Facebook
  • WhatsApp
  • Instagram
  • DONASI VIA OVO Bantu berikan donasi untuk blog ini agar bisa tetap semangat memberikan artikel terbaru
    Tampilkan Komentar
    Sembunyikan Komentar

    3 Komentar

    1. How can I show ads between posts like posts on your blog.

      BalasHapus
      Balasan
      1. I see you're using LinkMagz template

        You can check it on his developer template website
        https://sugeng.id/docs/panduan-setting-template-linkmagz/

        It's called Infeed Ads

        Don't forget use translator

        Hapus
    Catatan
    • Mohon Tinggalkan komentar sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel