An Trần Digital
No Result
View All Result
Thứ Sáu, Tháng Sáu 6, 2025
  • Thủ thuật
    • Blogspot/Blogger
    • Phần Mềm
    • WordPress
    • Plugin WordPress
  • Đồ hoạ
    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
  • Themes
    • Blogger/Blogspot
    • WordPress
  • Khoá học miễn phí
    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình – Web
    • Marketing – SEO
  • Source Code
  • Mã giảm giá Shopee, Tiki
Ủng hộ tôi
An Trần Digital
  • Thủ thuật
    • Blogspot/Blogger
    • Phần Mềm
    • WordPress
    • Plugin WordPress
  • Đồ hoạ
    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
  • Themes
    • Blogger/Blogspot
    • WordPress
  • Khoá học miễn phí
    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình – Web
    • Marketing – SEO
  • Source Code
  • Mã giảm giá Shopee, Tiki
No Result
View All Result
An Trần Digital
No Result
View All Result

Home - Thủ thuật Wordpress - Cách tạo Scroll Progress Bar cho website

Cách tạo Scroll Progress Bar cho website

by An Tran
06/08/2023
in Thủ thuật Wordpress
Reading Time: 6 mins read
A A
0
Cách tạo Scroll Progress Bar cho website
25
SHARES
309
VIEWS

Nội dung bài viết

  1. Giới thiệu về Scroll Progress Bar
    1. Định nghĩa và mục đích
    2. Vai trò của Scroll Progress Bar trong giao diện người dùng
    3. Ứng dụng và trường hợp sử dụng
  2. Cách thêm thanh Scroll Progress Bar
    1. File index.html
    2. File styles.css
    3. File script.js
    4. Tóm tắt

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:

Để duy trì blog ngoài link rút gọn & mình có làm aff cho 1 số bên hosting.

Các nhà cung cấp uy tín về mặt chất lượng & đội ngũ support nên mọi người cứ yên tâm.

Nếu bạn đang có ý định mua Hosting, VPS mình có list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

  • Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
  • Tino: Business Hosting, NVMe Hosting và NVMe VPS
  • iNet: Cloud VPS và Web Hosting
  • 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.

Tags: cách tạo thanh cuộn tiến trìnhscroll progress bar
Previous Post

Tải Preset Camera Raw Vintage ngược nắng, cổ điển

Next Post

Cách Tạo Mã Coupon Trong WordPress Không Dùng Plugin

An Tran

An Tran

Tôi là An Trần, thuộc thế hệ 9X. Hiện tại đang làm nhân viên cắt cỏ tại sân Old Trafford.

Related Posts

cách tạo shortcode hiển thị ngày tháng tự động cho wordpress

Cách Tạo Shortcode Hiển Thị Ngày Tháng Tự Động Trong WordPress

12/12/2024
Tự động thêm nguồn khi sao chép nội dung

Cách tự động thêm nguồn khi sao chép nội dung

16/10/2024
hướng dẫn custom bảng tin trong admin wordpress

Hướng dẫn custom bảng tin trong admin wordpress

09/07/2024
cách hiển thị thời gian đọc bài viết trên website

Cách hiển thị thời gian đọc bài viết trên website

06/06/2024
Next Post
Cách tạo mã coupon trong wordpress không dùng plugin

Cách Tạo Mã Coupon Trong WordPress Không Dùng Plugin

Subscribe
Notify of
guest

Hãy dùng tên của bạn khi comment, không sử dụng keyword trong ô Tên. Xin cảm ơn!

guest

Hãy dùng tên của bạn khi comment, không sử dụng keyword trong ô Tên. Xin cảm ơn!

0 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments

BÀI VIẾT NGẪU NHIÊN

chia-se-powerpoint-template-sieu-sin-antrandigital

Chia sẻ PowerPoint Templates Siêu Xịn Giá Vài Trăm Đô

04/07/2020
Hướng dẫn xoá category trong url wordpress

Hướng dẫn cách xoá Category trong Url wordpress

28/04/2022
chia-se-preset-camera-raw-han-quoc-antrandigital

Chia sẻ preset camera raw hàn quốc xẻng blend ảnh đẹp

30/12/2020
Cách ẩn widget trên giao diện điện thoại cho website wordpress an trần digital

[WordPress] Cách ẩn Widget trên giao diện mobile cho website

05/01/2022

HOSTING / VPS KHUYÊN DÙNG

logo azdigi

Hosting WordPress chất lượng cao. Support tốt 24/7. Xem ngay

logo inet

Nhà cung cấp hosting, tên miền có lâu đời ở Việt Nam. Xem ngay

logo tinohost

Hosting WordPress chất lượng cao. Support tốt. Dùng thử 7 ngày. Click để nhận mã giảm 10% ngay. Xem ngay


An Trần Digital là blog cá nhân chia sẻ preset lightroom, camera raw từ máy tính đến mobile, template blogspot, theme wordpress và các khoá học khác hoàn toàn miễn phí.

DMCA.com Protection Status

Comments gần đây

  • An Tran
    Quản lý
    trong Share Key Screaming Frog SEO Spider
  • gia cat luoing trong Share Key Screaming Frog SEO Spider
  • An Tran
    Quản lý
    trong Share Key Screaming Frog SEO Spider

Xem nhiều nhất ngày

Share Key Screaming Frog SEO Spider

2000+ Preset Camera Raw chỉnh màu ảnh đẹp nhất

Về An Trần Digital

Giới thiệu về tôi

Bảo mật

Hợp tác

Bản quyền

Liên hệ

Donate

© 2020 An Trần Digital - All Rights Reserved

No Result
View All Result
  • Thủ thuật
    • Blogspot/Blogger
    • Phần Mềm
    • WordPress
    • Plugin WordPress
  • Đồ hoạ
    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
  • Themes
    • Blogger/Blogspot
    • WordPress
  • Khoá học miễn phí
    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình – Web
    • Marketing – SEO
  • Source Code
  • Mã giảm giá Shopee, Tiki

© 2020 An Trần Digital - All Rights Reserved

wpDiscuz

Đồng ý sử dụng cookie

Những cookie này giúp trang web ghi nhớ thông tin về lần truy cập của bạn. Nhờ đó, bạn có thể truy cập trang web này dễ dàng hơn vào lần tới và trang web cũng trở nên hữu ích hơn cho bạn. Tìm hiểu thêm