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 </body>.
<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 </body>.
<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.