Cara Membuat Persentase pada Scrollbar

Membuat Persentase pada Scrollbar - Pertama kali saya melihat style persentase scrollbar pada blog, saat berkunjung pada blog milik Kang Ismet. Terlihat keren dan unik. Itu menurut saya..

Memang, persentase scrollbar style ini bukan fitur penting bagi sebuah blog. Namun dapat memperindah tampilannya. Tergatung selera masing-masing. Dan, tidak ada salahnya untuk mencoba menerapkan persentase pada scrollbar ini.

Fungsinya, dengan menambahkan persentase, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100%.

DEMO | persentase scrollbar style 

Untuk membuatnya silahkan ikuti langkah-langkah sederhana berikut ini:

Langkah 1 : Seperti biasa masuk ke Template dan Edit HTML. Simpan kode ini di atas ]]></b:skin> 

Saran, biasakan untuk membackup template sebelum melakukan editing pada template blog. Gunanya untuk menghindari hal-hal yang tidak diinginkan jika terdapat kesalahan dalam editing template.

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}

Langkah 2 : Simpan kode ini di bawah </head>

<div id='scroll'></div>

Langkah 3 : Simpan JavaScript ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Simpan Template. Selamat... Jika langkah-langkah yang anda lakukan tidak salah maka blog anda seharusnya sudah ada persentase di samping scrollbar. 

Share :