Note: You tin plough over the axe cheque out the demo of this widget Here (Tip: Make certain y'all scroll upward or downward the page to encounter the percent along the scrollbar).
The First affair y'all demand to produce is to login into your Google trouble concern human relationship making certain that your blogs are hosted on that item account. Now become to Blogger Dashboard as well as pick out the spider web log inwards which y'all would similar to add together Percentage Value to a Scrollbar. Go to Template >> Edit HTML and search for the ]]></b:skin> tag. Once y'all accept flora the ]]></b:skin> tag successfully, simply inwards a higher house it glue the next CSS code.
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px corporation transparent;
border-left-color: #2187e7;
}
After adding the CSS coding, search for the ending </head> tag as well as correct afterwards it glue the next code. (Tip: Make certain y'all glue the code betwixt the ending </head> as well as opening <body> caput tag.
<div id='scroll'></div>
Lastly, search for the ending </body> tag as well as simply inwards a higher house it glue the next JavaScript code. This is the code which volition ensure that your scrollbar shows the accurate percent upon scrolling upward or downward the page. Once everything is done, relieve the template past times pressing “Save Template” Button available on the travel past times correct corner of your screen.
<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 / two - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>
Congratulations: You accept successfully added percent value to a scroll bar inwards bloggers. Now become as well as cheque our spider web log to encounter the widget inwards action.
We promise this tutorial accept helped to larn How to Add Percentage Value to a Scrollbar inwards Bloggers. Let us know if y'all accept whatever suggestions past times commenting them below. If anyone desire quick attention or back upward simply messages us on our Facebook Fan Page.
Comments