Đếm phần trăm (%) khi cuộn trang cho blogger


Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Thêm đoạn css này bên trên thẻ đóng ]]></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;
}

Tiếp theo, thêm code này sau thẻ </head>
<div id='scroll'/>

Cuối cùng, thêm đoạn code này trước thẻ </body> rồi Lưu Mẫ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>

DXOan

Đây chính là tôi với sự bùng nổ của những giấc mơ. Tôi thích khám phá và chia sẻ những điều mới mẻ. Hãy đồng hành cùng tôi nhé ! 😁😘😍 - Con đường tôi đi là con đường tôi chọn - 😎😂✌ facebook twitter pinterest youtube external-link

2 Nhận xét

Vui lòng đưa ra những nhận xét tích cực, mang tính xây dựng.*

  1. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  2. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
Mới hơn Cũ hơn

AdBlock Detected!

Phát hiện trình duyệt đang sử dụng AdBlock. Vui lòng tắt AdBlock để có thể xem nội dung cũng như ủng hộ tác giả. DXOan xin cảm ơn. Chúc bạn một ngày vui vẻ !