Membuat Tombol Back To Top dengan Progress Scroll

Table of Contents

Pada tutorial berikut ini saya akan berbagi bagaimana cara membuat tombol back to top dengan progres scroll seperti Arlina design.

Tombol Back To Top dengan Progress Scroll memiliki fungsi yang sama dengan tombol back to top seperti tutorial sebelumnya.

Bedanya untuk mengetahui seberapa jauh halaman di-scroll atau di-scroll oleh pengunjung situs dengan menampilkan animasi garis pada tombol back to top ini.

Tombol back to top dengan progres scroll mempunyai peranan yang cukup penting bagi situs dengan konten yang memiliki isi halaman yang panjang.

Bagi situs yang memiliki banyak informasi pada halamannya akan membuat konten lain lewat tanpa disadari bergulir jauh ke bawah halaman.

Bagi anda yang ingin mencoba, silahkan ikuti langkah-langkahnya berikut ini:

Membuat Tombol Kembali Ke Atas dengan Progress Scroll

Kode yang akan saya bagikan ini menggunakan icon dari Fontawesome. Jika Anda belum menambahkannya, tambahkan kode dibawah ini sebelum </head> editor template.

<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Setelah menambahkan kode fontawesome diatas, silakan tambahkan kode berikut ini tepat sebelum </head>

1. Langkah pertama, buka Blogger

2. Klik menu Tema - Edit HTML

3. Tambahkan kode dibawah ini sebelum </head>

<style>
/* Back to top with progress */
@-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%}}
.arlina-to-top{background:#fff;position:fixed;right:25px;bottom:25px;height:46px;width:46px;cursor:pointer;display:block;border-radius:99em;box-shadow:inset 0 0 0 2px rgb(0 0 0 / 10%);z-index:10000;opacity:0;visibility:hidden;transform:translateY(-15px);transition:all .3s linear}progress{opacity:1;visibility:visible;transform:translateY(0)}
.arlina-to-top::after{position:absolute;font-family:'Fontawesome';content:'\f106';text-align:center;line-height:44px;font-size:26px;color:rgba(0,0,0,0.3);left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:1;transition:all .3s linear}
.arlina-to-top:hover::after{opacity:0}
.arlina-to-top::before{position:absolute;font-family:'Fontawesome';content:'\f106';text-align:center;line-height:44px;font-size:26px;opacity:0;background:black;-webkit-background-clip:text;-webkit-text-fill-color:transparent;left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:2;transition:all .3s linear}
.arlina-to-top:hover::before{opacity:1}
.arlina-to-top svg path{fill:none}
.arlina-to-top svg.progress-circle path{stroke:rgba(0,0,0,0.2);stroke-width:4;box-sizing:border-box;transition:all .3s linear}
</style>

Selanjutnya tambahkan kedua kode dibawah ini sebelum </body>

<div class='arlina-to-top'>
<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>
</div>

<script>
//<![CDATA[
// back to top with progress
!function($){"use strict";$(document).ready(function(){var a=document.querySelector(".arlina-to-top path"),b=a.getTotalLength();a.style.transition=a.style.WebkitTransition="none",a.style.strokeDasharray=b+" "+b,a.style.strokeDashoffset=b,a.getBoundingClientRect(),a.style.transition=a.style.WebkitTransition="stroke-dashoffset 10ms linear";var c=function(){var c=$(window).scrollTop(),d=$(document).height()-$(window).height();a.style.strokeDashoffset=b-c*b/d};c(),$(window).scroll(c),jQuery(window).on("scroll",function(){jQuery(this).scrollTop()>50?jQuery(".arlina-to-top").addClass("active-progress"):jQuery(".arlina-to-top").removeClass("active-progress")}),jQuery(".arlina-to-top").on("click",function(a){return a.preventDefault(),jQuery("html, body").animate({scrollTop:0},550),!1})})}(jQuery);
//]]>
</script>

Jika sudah simpan tema dan lihat hasilnya di blog anda.