Thêm công cụ đếm phần trăm cho thanh cuộn trên website/blog

Bài viết này sẽ hướng dẫn bạn thêm công cụ đếm phần trăm tỷ lệ bên thanh cuộn Scrollbar. Thật sự nó cũng không có gì là quan trọng đối với một trang web/blog nhưng có thể nó sẽ gây ra sự chú ý cho các độc giả của bạn khi di chuyển thanh cuộn, nó sẽ thông báo cho họ biết họ đã đọc và đang ở vị trí nào của website/blog

Live Demo
Bước 1: Trong template bạn chèn đoạn code bên dưới trước thẻ ]]></b:skin>

#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 solid transparent;
  border-left-color: #2187e7;
}

Bước 2: Thêm đoạn bên dưới sau thẻ đóng </head>

<div id='scroll'></div>

Bước 3: Tìm thẻ đóng </body> và thêm đoạn code bên dưới vào trước nó rồi lưu lại

<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(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Chúc bạn thành công!

Nguồn Bloggertut