[Blogger] Tạo nút lên đầu trang phong cách progress bar cho blogspot

Chào các blogger, tiếp tục loạt bài viết về mảng này, hôm nay hung1001 xin chia sẻ cho các bạn 1 nút back to top sử dụng jquery cực chất. Có thể nói nút này sẽ kiêm luôn chức năng đếm % thanh cuộn cho bạn. Hình hài như nào bạn có thể test ngay tại bài viết này nhé

Ok nếu bạn thích hãy bắt đầu thủ thuật nào

Như thường lệ đăng nhập vào trang quản trị và chỉnh sửa HTML

Tích hợp fontawesome nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </head>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Tích hợp JQuery nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>

Viết CSS, dán code sau vào trước thẻ ]]></b:skin>

.backTop{position:fixed;right:20px;bottom:20px;display:none;z-index:100}
#backTop{width:50px;height:50px;background:rgba(0,0,0,0);border-radius:50%;text-align:center;line-height:45px;font-size:30px;color:#fff;display:block;overflow:hidden;position:relative;box-shadow:0 3px 1px rgba(0,0,0,0.3)}
#backTop i{color:#fff;position:absolute;right:15px;top:8px;z-index:inherit}
#backTopBackground{position:absolute;left:-10%;top:100%;width:120%;height:120%;background:#111}

Cuối cùng đặt đoạn code sau trước thẻ đóng </body>

<script type='text/javascript'>
    $(function() {

     $('#backTop').click(function(e) {
      $('html,body').animate({
       scrollTop: 0
      }, 800);
      return false;
      e.preventDefault();
     });

     placebackTopBackground();
     $(window).scroll(function() {
      (($(window).scrollTop() > 100) ? $('.backTop').stop().css('display', 'block').animate({
       'bottom': '20px'
      }, 100) : $('.backTop').stop().animate({
       'bottom': '20px'
      }, 100, function() {
       $(this).css('display', 'none');
      }));
      placebackTopBackground();
     });

     function placebackTopBackground() {
      var d = $(document).height(),
       c = $(window).height(),
       s = $(window).scrollTop();
      var position = (1 - (s / (d - c))) * 100;
      $('#backTopBackground').css('top', position + '%');
     }
    });
</script> 
<div class='backTop'>
 <a href='#' id='backTop'>
  <span id='backTopBackground'></span>
  <i class="fa fa-angle-up"></i>
 </a>
</div>

Lưu lại và tận hưởng thành quả

Tùy chỉnh:
+ Chỉnh màu sắc vị trí, kích thước button theo ý thích của bạn.
+ Chỉnh giá trị 800 thành số khác để thay đổi tốc độ cuộn trang, số càng nhỏ quá trình càng nhanh và ngược lại

Good Luck !