Tạo hiệu ứng scrollbars top khi cuộn trang cho blogger

 hí xin chào mọi người nhá nay thì mình xin chia sẽ cho mọi người cách tạo hiệu ứng thanh scrollbars top khi cuộn trang nhá. okii bắt đầu làm thui nha. 

tạo hiệu ứng scrollbars top khi cuộn trang cho blogger

Hiệu ứng scrollbars top là gì ???

các bạn hay đọc 1 trang báo với nội dung rất dài, nhưng các bạn không biết là mình đang đọc tới đâu rồi, để mà biết tiến trình của mình đã đọc bài báo này tới đâu rùi thì scrollbars top là một cái tiện ích giúp anh em biết được điều đó nhá. 

bước 1: vào trang quản trị blogger --> chủ đề --> chình sửa HTML

bước 2: tìm cho mình thẻ </head> và thêm hai link này nào phía trên thẻ đóng </head>

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/> 

<script async='async' src='jquery-3.5.1.min.js'/>

bước 3: tìm đến thẻ </body> và dán đoạn code javascript bên dưới vào phía trên thẻ đóng </body>

<script>
window.onscroll = function() {
    myFunction()
};
function myFunction(){
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

/* Progress Bar kimidev */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#F86152;}

<div class='progress-container'>
<div class='progress-bar' id='myBar' style="width:0%;"></div>
</div>