Cách tạo Scroll Progress Bar cho website

Giới thiệu về Scroll Progress Bar

Định nghĩa và mục đích

Scroll Progress Bar (thanh tiến trình cuộn) là một phần của giao diện người dùng, thường được đặt ở phía trên hoặc phía dưới của trang web. Mục đích chính của nó là cung cấp một cách trực quan để hiển thị tiến độ cuộn trang của người dùng. Khi người dùng cuộn nội dung, thanh tiến trình sẽ hiển thị mức độ tiến trình của họ trong việc khám phá nội dung trên trang web.

Vai trò của Scroll Progress Bar trong giao diện người dùng

Scroll Progress Bar đóng vai trò quan trọng trong cải thiện trải nghiệm người dùng và tăng cường sự tương tác trên trang web. Những lý do sau đây làm cho nó trở thành một thành phần quan trọng của giao diện người dùng:

• Dẫn dắt người dùng: Scroll Progress Bar hướng dẫn người dùng về tiến trình cuộn trang và thông báo cho họ biết đã đọc được bao nhiêu nội dung. Điều này giúp cải thiện sự hiểu biết về cấu trúc trang web và hỗ trợ người dùng tìm kiếm thông tin một cách dễ dàng.
• Tăng tính tương tác: Thanh tiến trình cuộn cũng thúc đẩy sự tương tác của người dùng trên trang web. Người dùng sẽ cảm thấy hứng thú hơn khi thấy tiến trình của họ trên thanh tiến trình và sẽ tiếp tục cuộn trang để khám phá nội dung thêm.
• Tối ưu hóa trải nghiệm người dùng: Scroll Progress Bar giúp cải thiện trải nghiệm người dùng bằng cách giúp họ định hình được phạm vi nội dung và tổ chức thông tin một cách có trật tự.

Ứng dụng và trường hợp sử dụng

Scroll Progress Bar có rất nhiều ứng dụng và có thể được áp dụng trong nhiều trường hợp sử dụng khác nhau, bao gồm:

• Trang web dài: Trang web với nội dung dài, như blog, trang tin tức hoặc trang hướng dẫn, thường sẽ có lợi từ việc sử dụng Scroll Progress Bar để giúp người dùng theo dõi tiến trình đọc.
• Trình bày thuyết trình: Scroll Progress Bar cũng có thể được tích hợp vào trình bày thuyết trình trực tuyến, giúp khán giả biết được mức độ tiến trình của thuyết trình.
• Trang đọc sách điện tử: Trong các ứng dụng đọc sách điện tử, Scroll Progress Bar hỗ trợ độc giả biết mình đã đọc được bao nhiêu trang và còn bao nhiêu trang cần đọc.
• Hình ảnh và video dài: Scroll Progress Bar có thể được sử dụng trong trình chiếu hình ảnh hoặc video dài, cho phép người xem biết họ đã xem được bao nhiêu nội dung.

Xem thêm: Hướng dẫn cách xoá Category trong Url wordpress

Cách thêm thanh Scroll Progress Bar

Để viết mã để tạo thanh tiến trình cuộn (scroll progress bar), bạn có thể sử dụng HTML, CSS và JavaScript. Dưới đây là một ví dụ cơ bản về cách làm điều đó:

File index.html

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Thanh tiến trình cuộn</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Phần tử chứa thanh tiến trình cuộn -->
  <div class="progress-bar-container">
    <div class="progress-bar" id="scroll-progress"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

File styles.css

/* Thiết lập ban đầu cho trang */
body {
  margin: 0;
  padding: 0;
}

/* Phần tử chứa thanh tiến trình cuộn */
.progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #f0f0f0;
}

/* Thanh tiến trình cuộn */
.progress-bar {
  height: 100%;
  width: 0;
  background-color: #007bff;
}

File script.js

// Sự kiện DOMContentLoaded sẽ được kích hoạt khi trang web đã tải xong và cây DOM đã sẵn sàng để thao tác.
document.addEventListener("DOMContentLoaded", function () {
  // Lấy phần tử thanh tiến trình cuộn bằng cách sử dụng ID "scroll-progress"
  const progressBar = document.getElementById("scroll-progress");
  
  // Hàm này cập nhật chiều dài của thanh tiến trình cuộn dựa vào vị trí cuộn hiện tại của trang.
  function updateProgressBar() {
    // Chiều cao của cửa sổ trình duyệt
    const windowHeight = window.innerHeight;
    
    // Chiều cao của toàn bộ tài liệu
    const documentHeight = document.documentElement.scrollHeight;
    
    // Vị trí cuộn hiện tại của trang
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    // Tính toán tiến trình cuộn dựa vào vị trí cuộn và kích thước trang
    const progress = (scrollTop / (documentHeight - windowHeight)) * 100;
    
    // Cập nhật độ dài của thanh tiến trình cuộn
    progressBar.style.width = progress + "%";
  }

  // Thêm sự kiện cuộn (scroll) cho cửa sổ trình duyệt, khi có sự kiện cuộn xảy ra, gọi hàm updateProgressBar()
  window.addEventListener("scroll", updateProgressBar);
});

Để xem hiệu quả hoạt động của thanh tiến trình cuộn, bạn có thể tạo một project mà An Tran Digital đã tạo trên Codepen dưới đây và sao chép mã vào từng tệp tương ứng. Sau đó, bạn có thể chạy và thử nghiệm thanh tiến trình cuộn khi cuộn trang web.

See the Pen
Scroll Progress Bar by An Tran Digital (@antrandigital)
on CodePen.

Tóm tắt

Scroll Progress Bar là một thành phần quan trọng trong giao diện người dùng, giúp người dùng theo dõi tiến trình cuộn trang một cách trực quan. Với vai trò dẫn dắt người dùng, tăng tính tương tác và tối ưu hóa trải nghiệm người dùng, Scroll Progress Bar có nhiều ứng dụng và thích hợp cho các trường hợp sử dụng khác nhau. Bằng cách tích hợp thanh tiến trình cuộn vào trang web của bạn, bạn sẽ cải thiện trải nghiệm của người dùng và tăng cường tương tác trên trang web của mình.