Installing Percentages on Scrollbar

Installing Percentages in the Scrollbar - Subsequent posts on how to install a percentage function on the blog's scrollbar. Maybe you have seen this percentage function on other blogs.

Actually this scrollbar percentage is not an important feature for a blog. But there is nothing wrong to try, and even then it depends on the taste of each.

By adding this percentage not only as a blog decoration but visitors will be able to see what percentage of pages he has scrolled, if it has reached the bottom of the page the percentage value will be 100%.

How to implement it is also quite easy, please follow these simple steps:

First, save the code below just above ]]></b:skin> or </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;
}

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

<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>