Installing Percentage In Scrollbar

Installing Percentage In Scrollbar 

Next post on how to install the function on the percentage of the scrollbar blog. Maybe you've seen this percentage function in another blog. 

Actually, the percentage of the scrollbar is not a feature that is important for a blog. But it never hurts to try, and even then depending on individual taste. 

By adding this percentage is not just a mere decoration blog but visitors will be able to see what percentage of the page that he has a scroll, if it has reached the bottom of the page then the percentage would be 100%.

• DEMO

The way the application is quite easy, just follow the simple steps below: 

First, save the code below just above ]]></b:skin> Or </style>

CSS

#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 below </head>

HTML

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

Save the following code just above the </ body>

JQUERY

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

If the steps you are doing is not wrong, then your blog should already exist in the percentages next to the scrollbar. 

Easy enough. Good luck.