Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Irvan Dev Blog, hi good afternoon all... this time i will share a tutorial on how to make the percentage of the scroll bar when the mouse scroll up and down. Will look attractive right!, so why don't we just try it.
Very simple, we just simply enter the following code to the html page on our blog or website. What is needed to be able to make this succesful way done and appear on our blog?
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>4. Find this code Ctrl+F ]]></b:skin> or </style>
5. Then add the following CSS script just above the code ]]></b:skin> or </style>
#scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#000;
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;
}6. Add script HTML/Javascript below right under the code <body>
<div id='scroll'></div><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> |
| Scroll Bar Percentage[images:acebangsam.us] |