Memasang Presentase Scrollbar Pada Blog

Memasang Presentase Scrollbar Pada Blog- Pada kesempatan kali ini, saya akan share cara memasang presentase scrollbar pada blog yang bisa anda lihat juga di blog saya ini. Memasang presentase scrollbar ini sebenarnya hanya untuk mempercantik blog dan tidak penting untuk di pasang. Tapi ini tergantung selera masing masing saja, mau dipasang atau tidak.

Langkah- langkahnya cukup mudah, silahkan ikuti cara di bawah ini:

Pertama, simpan code dibawah ini tepat diatas </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;
}

Kemudian,Simpan code pemanggilannya dibawah </head>

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

Simpan, code jquerynya diatas tag </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(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

Simpan dan lihat hasilnya.


Jika anda mengikuti cara dengan benar, seharusnya presentasenya sudah muncul, sekian postingan saya kali ini, semoga bermanfaat bagi kita semua, dan Terima Kasih.