Ikuti kami di Blogger atau di Google News
...
Back To Top Button dengan Animasi Progress Bar

Back To Top Button dengan Animasi Progress Bar

Cara lengkap memasang tombol Back to Top dengan indikator progress bar pada Website atau Blog.

Tombol Back to top yang berguna mempermudah pembaca kembali ke bagian atas artikel tanpa harus melakukan scroll/gulir secara manual, rasanya hampir wajib keberadaanya pada sebuah Blog.

Penambahan fitur yang tidak terlalu kentara namun sangat berguna ini hampir jarang diperhatikan, utamanya bagi si pemilik blog. Bagaimanapun, demi kenyamanan pembaca penempatan tombol ini tetaplah harus diperhatikan.

Tombol Back to Top Sticky

Sebelumnya saya pernah membuat artikel serupa dengan judul Cara Membuat Tombol ToTop Sticky di Median UI 1.6. Bagi Kalian pengguna template yang sama bisa mencobanya.

Tombol Back to top sticky diatas tanpa penambahan script dan css yang pastinya sangat ringan.

Tombol Back to top dengan Progress Bar

Pada artikel kali ini saya akan membagikan sedikit tutorial supaya tombol Back to top tetap tampil tanpa mengganggu pembaca, bahkan dengan penambahan fungsi indikator progress bar sebagai penanda posisi halaman yang sedang aktif. Sehingga menambah fungsi dan juga menarik dilihat.

Baiklah langsung saja kita ke tutorial pemasangannya.

PENTING!
Biasakan melakukan backup Tema Kalian sebelum melakukan peng-editan.

Pada Dashboard Blogger pilih Tema kemudian Backup. Jika sudah mari kita lanjutkan.

Cara membuat Tombol Back to Top dengan Progress Bar

Langkah pemasangan tombol Back to top dengan indikator progress bar :

Step 1 : Silakan masuk ke Dashboard Blogger Kalian. Kemudian klik Tema lalu Edit HTML

Step 2 : Paste kode css berikut tepat diatas kode ]]></b:skin> atau di atas kode </style>

/* Backtotop with Progress Button KuyMase */

@-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%}}
.kym-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}
.kym-tTop svg.progress-circle{width:100%!important;height:100%!important}
.kym-tTop.active-progress{opacity:1;visibility:visible;transform:translateY(0)}
.kym-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}
.kym-tTop:hover::before{opacity:1}
.kym-tTop svg path{fill:none}
.kym-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 .kym-tTop{background:#1c2733}
.drK .kym-tTop svg.progress-circle path{stroke:#0f9d58}

Kode warna yang saya tandai silahkan disesuaikan.

Untuk mengatur posisi tombol silahkan sesuaikan right:20px;bottom:75px.

Semakin besar value-nya maka semakin jauh jarak tombol dari sudut

Step 3 : Berikutnya paste kode berikut didalam body bebas terserah kalian. Atau bisa didalam widget baru melalui Tata Letak

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

<div class='kym-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 (Replacable) ]-->
  <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 svg Replacable bisa diganti sesuai selera kalian. Dibawah sudah saya sediakan beberapa SVG yang bisa Kalian coba.

Step 4 : Pemasangan javascript. Saya sudah siapkan pilihan script yang bisa kalian gunakan.

Silahkan pilih salah satu saja antara dibawah ini.

Backtotop menggunakan library jQuery

Pemasangan tombol ini memerlukan jQuery. Jika pada Blog Kalian belum ada, silahkan tambahkan kode berikut diatas tag </head>.

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

silahkan paste kode JavaScript berikut diatas tag penutup </body> atau &lt;/body&gt;.

<script>/*<![CDATA[*/
  /* Backtotop by KuyMase https://www.kuymase.com */
$(document).ready(function() {
    var progressPath = document.querySelector('.kym-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('.kym-tTop').addClass('active-progress');
        } else {
            jQuery('.kym-tTop').removeClass('active-progress');
        }
    });
});/*]]>*/</script>

Backtotop menggunakan Pure/Vanilla Javascript

Silahkan Hapus jQuery jika tidak diperlukan!

Kemudian silahkan paste kode JavaScript berikut diatas tag penutup </body> atau &lt;/body&gt;.

<script>/*<![CDATA[*/
/* Backtotop KuyMase */
eval(function(k,u,y,m,a,se){a=function(y){return(y<u?'':a(parseInt(y/u)))+((y=y%u)>35?String.fromCharCode(y+29):y.toString(36))};if(!''.replace(/^/,String)){while(y--)se[a(y)]=m[y]||a(y);m=[function(a){return se[a]}];a=function(){return'\\w+'};y=1};while(y--)if(m[y])k=k.replace(new RegExp('\\b'+a(y)+'\\b','g'),m[y]);return k}('0.6("m",(7(){3 e=0.8(\'.9-a p\'),t=e.q();e.1.b=e.1.c="r",e.1.u=t+" "+t,e.1.d=t,e.v(),e.1.b=e.1.c="w-x y z";3 o=7(){3 o=0.2.4||0.5.4,n=A.B(0.5.f,0.5.g,0.2.C,0.2.f,0.2.g)-h.D,s=t-o*t/n;e.1.d=s};o(),0.6("i",o);h.6("i",(7(){3 e=0.2.4||0.5.4,t=0.8(\'.9-a\');e>=E?t.j.F(\'k-l\'):t.j.G(\'k-l\')}))}))',43,43,'document|style|documentElement|var|scrollTop|body|addEventListener|function|querySelector|kym|tTop|transition|WebkitTransition|strokeDashoffset||scrollHeight|offsetHeight|window|scroll|classList|active|progress|DOMContentLoaded|||path|getTotalLength|none|||strokeDasharray|getBoundingClientRect|stroke|dashoffset|10ms|linear|Math|max|clientHeight|innerHeight|50|add|remove'.split('|'),0,{}));
/*]]>*/</script>

Step 5 : Jika sudah semua, jangan lupa Simpan atau Preview untuk melihat hasilnya.

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.

Baca juga

Advertisement

Dare to be Different!

18 komentar

  1. Mas bisa bikinin versi pure jsnya?
    1. Saya coba dulu mas. Ditunggu updatenya..
    2. Siap
  2. Maksih ya mas sudah ngshare tutorialnya 😁
    1. Sama-sama mas. Semoga bermanfaat
  3. Sudah di update ya! Bagi yang tampilan tidak sesuai atau tidak work seperti pada blog ini. Silahkan dilaporkan.
    1. bang hanya tamil di home page saja gimana ya..
    2. Iya loh bang pada template median UI 1.6 dan udah sesuai tutorial, tapi tombol back to up gak muncul postingan artikel loh..
    3. Pasangnya lewat widget atau lgsung di edit html kak? kalo widget pastikan tidam ada tag kondisional cond='data:view.isPost'
  4. Without jQuery please , or any way to make jQuery lazyload
  5. Baik bang nanti saya cek, ada tag kondisi Pembungkusnya. Nanti saya info lagi ya.. makasih responya bang 😊😊
    1. Sama-sama kak. Silahkan dicoba, kalau belum fix bisa disampaikan lagi kak
    2. Udah fix Bang,

      Bang bagi tutor dong tuk template median UI v 1.6 biar bisa grid Dan list di home pagenya..
    3. Saya tampung request-an nya ya kak. Insya Allah secepatnya saya buat tutornya.. Ditunggu updatenya..
    4. Iya Bang, ditunggu ya bang pengin bisa gitu juga..😊😊
  6. Bang request lagi biar label berada di sebelum tanggal publikasi di home page ya, kaya punya abang cantik kali..😊😊😊
  7. Mas, bikin tutorial footer Kya blog ini dong, Ama statistik juga. Ditunggu yah
    1. Saya keep request-nya ya mas. Ditunggu update-nya..
Tuliskan pertanyaan seputar topik artikel diatas! Atau pertanyaan out of topic di .
Use this tools to convert basic comment to html characters, then copy it to comment form


image quote pre code