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

Next, save the caller code under </head>

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

Save the code below just above </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>

Then save the Template and see the results.

See the Pen Installing Percentages on Scrollbar by Wiendhy (@wiana) on CodePen.

If the steps you are taking are not wrong, then your blog should have a percentage beside the scrollbar.

It's easy enough. Good luck.