Menampilkan Persentase pada Scrollbar - HadaCircle

31 Januari 2017

Menampilkan Persentase pada Scrollbar

Persentase Scrollbar Percent

Tutorial Webmaster, Blogger

Memasang Persentase Pada Scrollbar - Postingan selanjutnya mengenai cara memasang fungsi persentase pada scrollbar blog. Mungkin anda pernah melihat fungsi persentase ini di blog lain.

Sebenarnya persentase scrollbar ini bukan fitur yang penting bagi sebuah blog. Namun tidak ada salahnya untuk dicoba, itupun tergantung selera masing-masing.

Dengan menambahkan persentase ini bukan hanya sebagai hiasan blog semata tetapi pengunjung akan bisa melihat berapa persen halaman yang telah Ia scroll, apabila telah sampai di bawah halaman maka nilai persentase akan menjadi 100%.

Cara penerapannya pun cukup mudah, silahkan ikuti langkah-langkah sederhana berikut ini :

1. Copy kode berikut sebelum </head>


<style>

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}
</style>

2. Copy kode berikut tepat di bawah <body> sehingga terlihat seperti

<body>
<div id='scroll'></div>
<script>
//<![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(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

3. Simpan Template
Comments


EmoticonEmoticon