How to capture percentage scroll bar with jQuery and CSS

ErnasLie
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?

We need a javascript code:

1. Login to your blogger panel admin
2. Click On Template » Edit HTML
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
3. Put the code right above </head>, if it already exists ignore it...
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>
Add this code right 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>
Save your template and see the result, good luck.

Percentage Scroll Bar On Blog
Scroll Bar Percentage[images:acebangsam.us]

1 comment

  1. Thanks for sharing, nice post!

    Hiện nay trên thị trường có nhiều loại may dua vong và sau nhiều năm kinh doanh thiet bi dua vong tu dong, máy đưa võng em bé An Thái Sơn nhận thấy may dua vong ts – sản phẩm máy đưa võng thiết kế dành riêng cho em bé, có chất lượng rất tốt, hoạt động êm, tuyệt đối an toàn cho trẻ, và vong dua em be là lựa chọn hoàn hảo đảm bảo giấc ngủ ngon cho bé yêu của bạn.

    Chia sẻ bệnh viêm khớp không nên ăn gì, một số mẹo giúp giảm độ cận thị cho bạn, bí quyết chống nắng với cà chua cực hiệu quả hay những thực phẩm giúp tóc mọc nhanh hiệu quả, cách giúp bé ngủ ngon giấc và thực phẩm giúp bé ngủ ngon mẹ nên biết, chia sẻ cách làm trắng da toàn thân bằng thực phẩm, những món ăn chữa bệnh mất ngủ giúp ngủ ngon, mách mẹ mẹo giúp bé không sốt khi mọc răng hay làm sao để trẻ không bị sốt khi mọc răng

    Những thực phẩm giúp đẹp da tại http://nhungthucphamgiupda.blogspot.com/
    Thực phẩm giúp bạn trẻ đẹp tại http://thucphamgiuptre.blogspot.com/
    Thực phẩm làm tăng tại http://thucpha…
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.