Now you can Subscribe using RSS

Submit your Email

Saturday, January 31, 2015

How to capture percentage scroll bar with jQuery and CSS

Irvan Dev

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]

Irvan Dev / Author & Editor

I am Irvandev, I m a fairly easy blogger and it's, untill today My spouse and i still love writing and submitting articles for blog site "Blog Irvandev".

1 comments:

  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ấcthự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://thucphamlamtang.blogspot.com/
    Những thực phẩm giúp làm giảm tại http://thucphamlamgiam.blogspot.com/
    Những thực phẩm tốt cho tại http://thucphamtotcho.blogspot.com/
    Những thực phẩm tốt cho da tại http://thucphamtotchoda.blogspot.com/
    Chăm sóc da mặt ở http://chamsocdamato.blogspot.com/
    Cách chăm sóc da mặt bằng http://cachchamsocdamatbang.blogspot.com/
    Dạy trẻ sơ sinh tại http://daytresosinh.blogspot.com/
    Bí quyết giảm cân hay tại http://biquyetgiamcanhay.blogspot.com/

    ReplyDelete

Coprights @ 2016, Blogger Templates