Membuat Tombol Back To Top di Blog

Mas Koding
Oktober 26, 2020

Kali ini saya akan membagikan tutorial cara membuat tombol back to top di blog atau website. Tombol Back To Top adalah tombol yang berfungsi untuk melakukan scrool ke bagian atas halaman ketika tombol kita klik. Umumnya tombol ini digunakan agar pengunjung tidak perlu melakukan scrool ke atas halaman secara manual, cukup klik tombol "back to top" maka layar akan melakukan scrool otomatis ke bagian atas halaman artikel.

Tutorial Cara Pasang Tombol Back To Top

Berikut ini tahapan cara pasang tombol back to top. Silahkan kamu ikuti tahapan yang saya berikan berikut ini :

  • Silahkan kamu salin code element berikut ini
    • <button id="backToTop" onclick="getTop()" speed="20"></button>
  • Pastekan kode tersebut tepat setelah element <body>
  • Silahkan Ganti code yang saya beri warna hijau yaitu speed="20" dengan angka lain. Angka ini berfungsi untuk mengatur kecepatan scroll. Semakin kecil angkanya, maka kecepatan scrool akan semakin lama.
  • Stelah itu salin code javascript berikut : 
    • <script>
    //<![CDATA[
    //------ scroll top --------
    var speedBTT;
    if(document.getElementById("backToTop")){document.getElementById("backToTop").innerHTML='<svg style="width:24px;height:24px;margin-bottom: -7px;" viewBox="0 0 24 24">\n        <path fill="currentColor" d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"></path>\n    </svg>';var creatStyleBTT=document.createElement("style");creatStyleBTT.innerHTML="\n    #backToTop {\n    position: fixed;\n    background-color: #24694e;\n    bottom: 30px;\n    width: 40px;\n    line-height: 33px;\n    border-radius: 25px;\n    right: 5%;\n    text-align: center;\n    cursor: pointer;\n    color: white;\n    outline: none;\n      }\n    ",document.head.append(creatStyleBTT),speedBTT=Number(document.getElementById("backToTop").getAttribute("speed"))}function getTop(){var e=window.setInterval(function(){var n=window.pageYOffset;n>0?window.scrollTo(0,n-speedBTT):window.clearInterval(e)},1)};
    //]]>
    </script>
  • Pastekan code javascript ini tepat sebelum element </body>
  • Lalu simpan "tema"

Hasilnya akan tampil seperti berikut :

Jika ada kendala saat pemasangan, silahkan bertanya di kolom komentar. Terimakasih telah berkunjung