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>
bước 4: tìm cho mình ]]></b:skin> và dán đoạn code css vào phía trên thẻ ]]></b:skin>
/* Progress Bar kimidev */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#F86152;}
bước 5: tìm đến thẻ <body> và dán đoạn mã HTML này vào phía dưới của thẻ <body>
<div class='progress-container'>
<div class='progress-bar' id='myBar' style="width:0%;"></div>
</div>
okii thì mình vừa chia sẽ cho mọi người cách tạo một thanh scrollbars top để xem tiến trình trên web, nếu có thắc mắc thì hãy comment bên dưới cho mình biết nhá chúc các bạn thành công nhe.
