Percentage Scroolbar is a useful widget to tell visitors how long the article is or how high the article is currently reading which is displayed as a percentage, besides being useful for providing information to readers, sometimes it is also commonly used to beautify the author's blog. So, so that my friend is not curious, I will share the tutorial.
Tutorial on Making Scrollbar Percentage Views on Blog
Here are some steps follow it, for scrollbar percentage view on a blog.
STEP 1. Please buddy open the Blog Dashboard → Themes → Edit HTML .
STEP 2. Then place the CSS code below right above ]]> </ b: skin> or </style> .
#PersenScroll {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background:linear-gradient(135deg,#437ff4,#0de9dc);color:#FFF;border-radius:3px}#PersenScroll:after {background: linear-gradient(135deg,#437ff4,#0de9dc);position: absolute;top: 4px;right: -8px;height: 24px;width: 6px;margin-top: -4px;content: "";border-radius: 2px;}
STEP 3. Then enter the following HTML code just above </body> .
<div id='PersenScroll'></div>
STEP 4. Don't forget to also enter the following JS code above </body> .
<script type='text/javascript'>/*<![CDATA[*/
$(window).scroll(function() {
var scrollTimer = null;
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#PersenScroll').height() / 2;
$('#PersenScroll')
.css('top', distance)
.text('(' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
</script>
scrollTimer = setTimeout(function() {
$('#PersenScroll').fadeOut();
}, 1500);
});
/*]]>*/
STEP 5. MAKE SURE !! You have installed Jquery, if not, please enter the code below right above </head> . If it is installed, do not reinstall it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
STEP 6. Finally, please save the theme of your blog. And finished the results can be seen below.
Outcomes :
Okay, here is the tutorial this time, thanks to online friends who have visited this blog. If your friends have suggestions, input, or questions, please leave them in the comments column. Thank you and see you in the next article.