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>

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>

sao khi thêm đầy đủ code rồi thì bây giờ chỉ cần lưu lại và ra xem kết quả thôi nhé và code này còn có thể áp dục cho các website thông thường khác nữa đó nhé, bạn có thể thử mà. 

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. 


Post a Comment

Previous Post Next Post