Cara Membuat Tombol Back To Top Dengan Animasi Progres Bar

Tombol Back To Top merupakan sebuah tombol yang berguna untuk mengembalikan tampilan ke atas artikel. Sehingga pembaca / visitor tidak perlu melakukan scroll halaman secara manual. Dan tombol ini mungkin akan menjadi wajib keberadaannya pada sebuah website atau blog.

Namun terkadang penambahan tombol ini sering tidak dianggap khusunya oleh pemilik blog, dikarenakan kebanyakan berikir penamabahan fitur ini tidak terlalu kentara, namun jangan salah. Fitur tombol ini sangat mempermudah dan menambah kenyamanan pembaca. Sehingga keberadan tombol ini harus diperhitungkan kebradaannya.

Tombol Back To Top Dengan Animasi Progres Bar

Pada artikel kali ini saya akan coba membagikan sedikit tutorial untuk membuat tombol Back To Top tidak terlalu mengganggu pembaca namun juga terlihat profesional dan modern.

Bahkan tutorial kali ini saya menambahkan animasi progres bar sehingga pembaca bisa mengetahui sampai titik mana artikel yang mereka lihata.

Sebelum kita ke tutorilnya, jika kalian ngin meliht demonya terlebih dahulu bisa klik tombol demo di bawah ini.

Baklah langsung saja ke tutorial pemasangannya.

Penting
Biasakan untuk Backup Tema kalian terlebih dahulu sebelum melakukan pengeditan

Masuk terlebih dahulu pada Dashboard Blogger lalu pilih Tema Lalu pilih Backup. Jika sudah mari kita lanjutkan.

Tutorial Pemasangan tombol Back To Top Dengan Progres Bar

Skrip ini memerlukan jQuery, jika pada template kalian belum terdapat jQuery, silahkan kian salin kode di bawah ini kemudan tempelkan kode tersebut tepat di atas kode </head>.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

Langkah Pemasangan

Langkah 1. Salin lalu tempelkan kode di bawah ini tepat di atas kode ]]</b:skin> atau di atas kode </style>.

/* Backtotop with Progress Button Siap Ngoding */

@-webkit-keyframes border-transform{0%,100%{border-radius:63% 37% 54% 46% / 55% 48% 52% 45%}14%{border-radius:40% 60% 54% 46% / 49% 60% 40% 51%}28%{border-radius:54% 46% 38% 62% / 49% 70% 30% 51%}42%{border-radius:61% 39% 55% 45% / 61% 38% 62% 39%}56%{border-radius:61% 39% 67% 33% / 70% 50% 50% 30%}70%{border-radius:50% 50% 34% 66% / 56% 68% 32% 44%}84%{border-radius:46% 54% 50% 50% / 35% 61% 39% 65%}}
.sn-tTop{position:fixed;right:20px;bottom:75px;height:45px;width:45px;display:block;background:#f7f7f7;border-radius:50px;box-shadow:inset 0 0 0 2px rgba(255,255,255,0.2),rgba(0,0,0,0.07) 0 1px 1px,rgba(0,0,0,0.07) 0 2px 2px,rgba(0,0,0,0.07) 0 4px 4px,rgba(0,0,0,0.07) 0 8px 8px,rgba(0,0,0,0.07) 0 16px 16px;z-index:1;opacity:0;visibility:hidden;transform:translateY(15px);-webkit-transition:all 200ms linear;transition:all 200ms linear}
.sn-tTop svg.progress-circle{width:100%!important;height:100%!important}
.sn-tTop.active-progress{opacity:1;visibility:visible;transform:translateY(0)}
.sn-tTop svg.line{position:absolute;text-align:center;line-height:40px;left:10px;top:10px;height:24px;width:24px;display:block;z-index:1;-webkit-transition:all 200ms linear;transition:all 200ms linear}
.sn-tTop:hover::before{opacity:1}
.sn-tTop svg path{fill:none}
.sn-tTop svg.progress-circle path{stroke:#404243;stroke-width:4;box-sizing:border-box;-webkit-transition:all 200ms linear;transition:all 200ms linear}

/* Darkmode silahkan sesuaikan classnya */

.drK .sn-tTop{background:#1c2733}
.drK .sn-tTop svg.progress-circle path{stroke:#0f9d58}

Kode warna yang saya tandai silahkan disesuaikan dengan selera masing-masing.

Untuk mengatur posisi tombol silahkan atur pada bagian right:20px;bottom:75px

Semakin besar nilainya maka semakin besar juga jarak tombol dari sudut layar.

langkah 2. Silahkan salin kode di bawah ini lalu tempelkan bada bagian body atau kalian juga bisa letakan pada menu Tata Letak.

<!--[ Back top button with Progress Bar Siap Ngoding ]-->

<div class='sn-tTop' onclick='window.scrollTo({top: 0})'>
  <svg class='progress-circle svg-content' height='100%' viewBox='-1 -1 102 102' width='100%'>
    <path d='M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98' />
  </svg>
  <!--[ SVG Panah keatas (Bisa Diganti) ]-->
  <svg class='line' fill='none' stroke='#08102b' viewBox='0 0 24 24'>
    <g transform='translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'>
      <path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0' />
    </g>
  </svg>
  <!--[ SVG Panah keatas Ends ]-->
</div>

Pada bagian (Bisa diedit) bisa kaloan ganti dengan simbol yang lainnya. Di bawah sudah saya sediakan beberapa varian tombol panah ke atas.

Langkah 3. Langkah terakhir tinggal kalian salin dan tempelkan kode berikut tepat diatas kode </body>.

<script>/*<![CDATA[*/
  /* Backtotop by Siap Ngoding https://www.siapngoding.my.id */
$(document).ready(function() {
    var progressPath = document.querySelector('.sn-tTop path');
    var pathLength = progressPath.getTotalLength();
    progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
    progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
    progressPath.style.strokeDashoffset = pathLength;
    progressPath.getBoundingClientRect();
    progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';

    var updateProgress = function() {
        var scroll = $(window).scrollTop();
        var height = $(document).height() - $(window).height();
        var progress = pathLength - (scroll * pathLength / height);
        progressPath.style.strokeDashoffset = progress;
    }
    updateProgress();
    $(window).scroll(updateProgress);
    var offset = 50;
    var duration = 550;
    jQuery(window).on('scroll', function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.sn-tTop').addClass('active-progress');
        } else {
            jQuery('.sn-tTop').removeClass('active-progress');
        }
    });
});/*]]>*/</script>

Langkah 4. Silahkan klik Simpan.

Icon SVG Back To Top Siap Pakai

Berikut ini saya sediakan beberapa icon SVG yang bisa digunakan untuk menggantikan icon Back to Top.

<svg class="line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.831 3.481c0.311 -0.316 0.745 -0.481 1.187 -0.45c0.427 -0.032 0.844 0.134 1.133 0.45l7.343 7.317c0.608 0.608 0.608 1.594 0 2.202c-0.608 0.608 -1.594 0.608 -2.202 0l-4.746 -4.746v11.164c0.005 0.854 -0.683 1.551 -1.537 1.555c-0.003 0 -0.005 0 -0.009 0c-0.857 -0.005 -1.551 -0.698 -1.555 -1.555V8.254L5.708 12.999c-0.608 0.608 -1.594 0.608 -2.202 0c-0.608 -0.608 -0.608 -1.594 0 -2.202l0 0L10.831 3.481z"/></svg>
    

<svg class="line" fill="#000" stroke="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.515 22.219L12 1.78L21.485 22.219L12 17.217L2.515 22.219z"/></svg>
    

<svg class='line' viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#000000"><polygon id="Shape" points="4 15 12 7 20 15 18 17 12 11 6 17"></polygon></g></g></svg>
    

Penutup

Sekian cara memasang tombol Back to top dengan indikator progress bar. Semoga bermanfaat untuk Kalian semua. Jika ada pertanyaan, tuliskan dikomentar ya.

Referensi:
www.kuymase.com