Tạo thêm thanh ProgressBar để trang web của bạn trở nên đẹp hơn

Đôi lúc bạn muốn trang trí cho website bạn thêm hiệu ứng, ví dụ như thêm thanh Progress Bar để người dùng ấn tượng hơn, hoặc biết được mình đã scroll đến đâu của bài viết. Thì hôm nay mình sẽ hướng dẫn bạn cách thêm thanh ProgressBar bằng code html và vài dòng Javascript đơn giản nhé!

Đầu tiên bạn chọn vị trí đặt thanh đó, ví dụ như mình thì mình đặt ở dưới cùng của thanh Header Main (nếu bạn cũng dùng flatsome thì nó sẽ ở /wp-content/themes/flatsome/template-parts/header/header-main.php.

<!--thanh progress bar-->
<div class="progress-bar" id="myBar"></div>

Tiếp theo đó là CSS cho nó đẹp hơn:

<style>
/*progress bar*/
.progress-bar {height: 100%;background: #000; width: 0%; height: 2px;}
</style>

Cuối cùng là thêm mã Javascript để tạo hiệu ứng chạy khi bạn cuộn trang:

<!--Script progress bar-->
<script>
    const progressBar = document.getElementById("myBar");
    window.onscroll = function() {
    let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    let scrolled = (winScroll / height) * 100;
    progressBar.style.width = scrolled + "%";
};
</script>

Tổng quan toàn bộ code là nó như thế này:

<!--thanh progress bar-->
<div class="progress-bar" id="myBar"></div>
<style>
/*progress bar*/
.progress-bar {height: 100%;background: #000; width: 0%; height: 2px;}</style>
<!--Script progress bar-->
<script>
const progressBar = document.getElementById("myBar");
window.onscroll = function() {
    let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    let scrolled = (winScroll / height) * 100;
    progressBar.style.width = scrolled + "%";};
</script>

Khá là đơn giản phải không nào? Mình nghĩ nó không quá khó để thực hiện, nếu như bạn thích vọc code thì đây là giải pháp hữu ích, nhưng nếu như bạn không rành code thì có thể cài thêm plugin để sử dụng cho dễ nhé!

Nếu bạn gặp khó khăn trong chỉnh sửa hoặc muốn phát triển tính năng riêng cho website thì có thể tham khảo dịch vụ bảo trì - phát triển tính năng website wordpress tại TNDigi nhé!

Mình tự học - tìm hiểu - nghiên cứu và làm việc với WordPress được khoảng thời gian nhất định nên lên serial chia sẻ những gì mà mình từng gặp qua. Sẽ có nhiều thiếu sót nên nếu như có chổ nào chưa đúng hay chưa hoạt động được bạn contact với mình để hoàn thiện hơn.

Ghi chú quan trọng:
Cách tuỳ biến không cần can thiệp vào CODE mà sử dụng hook (nếu chưa có trong hướng dẫn) sẽ được mình sớm cập nhật!

Kênh Zalo hỗ trợ miễn phí. Chúc bạn áp dụng thành công!