Follow Me

Installing Percentages on Scrollbar

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.

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.
Next Post Previous Post
No Comment
Add Comment
comment url