Hướng dẫn tạo thanh tiến trình đọc trên website bằng Javascript

Thanh tiến trình đọc (Reading Progress Bar) là một yếu tố giao diện nhỏ nhưng mang lại giá trị lớn cho trải nghiệm người dùng.

Giới thiệu về nền tảng thiết kế website Astro

Astro là một nền tảng thiết kế website tĩnh (Static Site Generator - SSG) hiện đại, được xây dựng nhằm giúp các nhà phát triển tạo ra những trang web nhanh, tối ưu và dễ quản lý. Được phát triển với triết lý Zero JavaScript by default, Astro giúp bạn giảm thiểu lượng JavaScript được tải trên trình duyệt, chỉ tải những gì thực sự cần thiết, từ đó cải thiện hiệu suất và trải nghiệm người dùng.

Một trong những ưu điểm nổi bật của Astro là khả năng tích hợp nhiều framework hiện đại như React, Vue, Svelte, hay SolidJS trong cùng một dự án. Điều này giúp bạn linh hoạt trong việc lựa chọn công nghệ phù hợp với từng phần của trang web mà không ảnh hưởng đến hiệu suất tổng thể.

Astro cũng hỗ trợ xử lý Markdown và MDX, giúp quản lý nội dung dễ dàng, đặc biệt hữu ích cho các blog hoặc trang tài liệu kỹ thuật. Ngoài ra, khả năng hỗ trợ Partial Hydration cho phép bạn chỉ tải các thành phần động khi cần thiết, tối ưu hóa trải nghiệm người dùng và tăng tốc độ tải trang.

Tầm quan trọng của thanh tiến trình đọc trên Website

Thanh tiến trình đọc (Reading Progress Bar) là một yếu tố giao diện nhỏ nhưng mang lại giá trị lớn cho trải nghiệm người dùng. Đây là một thanh hiển thị ở đầu hoặc bên cạnh trang web, cho biết mức độ người dùng đã đọc được bao nhiêu phần trăm của nội dung hiện tại.

Thanh tiến trình đọc không chỉ giúp người dùng biết họ đang ở đâu trong bài viết mà còn mang lại nhiều lợi ích quan trọng khác:

Cải thiện trải nghiệm người dùng (UX)

Khi người dùng truy cập vào một bài viết dài, đặc biệt là các bài viết chuyên sâu hoặc hướng dẫn kỹ thuật, việc cuộn liên tục mà không biết còn bao nhiêu nội dung phía trước có thể gây cảm giác khó chịu. Thanh tiến trình đọc giúp họ hình dung được độ dài của nội dung và ước lượng thời gian cần thiết để hoàn thành bài viết.

Ví dụ: Một người đọc một bài blog dài 5000 từ về hướng dẫn lập trình. Nếu không có thanh tiến trình, họ có thể cảm thấy mất phương hướng và dễ dàng bỏ dở. Tuy nhiên, nếu có thanh tiến trình, họ sẽ biết rằng họ đã hoàn thành 60% và có thể sẽ tiếp tục để hoàn thành nốt 40% còn lại.

Tăng thời gian truy cập và tỷ lệ hoàn thành nội dung

Một trong những yếu tố quan trọng giúp cải thiện SEO và giảm tỷ lệ thoát trang (bounce rate) là thời gian người dùng ở lại trang và tỷ lệ hoàn thành nội dung. Thanh tiến trình đọc giúp tăng động lực để người dùng hoàn thành bài viết thay vì rời đi giữa chừng.

Ngoài ra, nó cũng góp phần tạo cảm giác “game hóa” cho trải nghiệm đọc — mỗi lần người dùng cuộn trang, họ thấy thanh tiến trình di chuyển gần hơn đến mục tiêu hoàn thành, từ đó khuyến khích họ tiếp tục.

Tạo thanh tiến trình đọc bằng Javascript

Để tạo thanh tiến trình đọc bằng Javascript, bạn cần quan tâm đến 2 tệp chính: progress.astro chứa Javascript tạo tiến trình đọc, và single.astro đặt vị trí tiến trình đọc bài viết trên website. Tùy vào cấu trúc thư mục, mà 2 tệp này được định nghĩa, định dạng khác nhau, bạn cần tạo tệp table.astro và xác định vị trí của tệp single.astro để tiến hành điều chỉnh.

Tạo file Javascript để tạo thanh tiến trình đọc

Để bật tính năng tiến trình đọc trên website, nhằm xác định tiến độ đọc hết bài, nội dung trên một trang nhất định, bạn có thể thêm các đoạn code dưới đây để kích hoạt tính năng.

Trước tiên, hãy tạo một tệp mới có tên progress.astro và đặt chúng trong thư mục ~/components/javascript với đoạn code sau:

<div id="scroll-progress" class="bg-primary h-1 fixed top-0 left-0 z-50"> </div>

<script type="module">

	window.addEventListener("scroll", function () {
		const scrollableHeight =
			document.documentElement.scrollHeight - window.innerHeight;
		const scrolled = window.scrollY;
		const progressBar = document.getElementById("scroll-progress");
		const progress = (scrolled / scrollableHeight) * 100;
		progressBar.style.width = progress + "%";
	});
</script>

Bước 2: Đặt thanh tiến trình vào trong bài viết

Tiếp theo, trong tệp cấu hình bài viết, bạn chèn phần tử để hiển thị tiến trình đọc bài. Cụ thể, trong tệp single.astro, hãy thêm đoạn code sau:

---
import Progress from '~/components/javascript/progress.astro';
---

<section>
	<Progress/>
</section>

Phần tử <Progress> này sẽ là nơi hiển thị tiến trình đọc bài viết trên đầu trang, thay đổi chiều dài theo tiến độ đọc bài. Bạn có thể đặt phần tử này ở đầu bài viết hoặc trong một sidebar tùy thuộc vào thiết kế website của bạn.

Vị trí ~/components/article/progress.astro cần điều chỉnh, xác định đúng vị trí để đoạn code có thể triển khai được trên bài viết.

Nếu đoạn code không hoạt động, hoặc không thể sử dụng, có thể chúng đã được điều chỉnh. Truy cập vào đây để tiếp cận đoạn code tạo thanh tiến trình đọc mới nhất.

Như vậy, với đoạn code Javascript nêu trên, website của bạn đã có thêm thanh tiến trình đọc, giúp nội dung hiển thị trực quan, tối ưu SEO và thân thiện với người đọc hơn rất nhiều.