Cách làm hiệu ứng Scroll Indicator đơn giản
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách sử dụng chỉ báo cuộn trang
(scroll indicator) một cách hiệu quả. Chỉ báo cuộn trang là một thành phần
quan trọng giúp người dùng dễ dàng định vị và theo dõi vị trí trên một trang
web hoặc trong một tài liệu dài. Thay vì phải kéo chuột một cách mù quáng, chỉ
báo cuộn trang cho phép bạn biết được mình đang ở đâu trên trang và còn bao
nhiêu nội dung cần cuộn xuống.
Trong hướng dẫn này, chúng ta sẽ khám phá cách thêm chỉ báo cuộn trang vào
trang web của bạn bằng cách sử dụng mã HTML, CSS và có thể thêm cả JavaScript
để tùy chỉnh hơn. Chúng ta cũng sẽ tìm hiểu cách tạo một giao diện chỉ báo
cuộn trang thẩm mỹ và dễ nhìn.
Bất kể bạn là một người mới bắt đầu trong lập trình web hay đã có kinh nghiệm,
hướng dẫn này sẽ giúp bạn hiểu rõ hơn về cách thêm và tùy chỉnh chỉ báo cuộn
trang để tạo ra trải nghiệm người dùng tốt hơn.
Hãy cùng bắt đầu tìm hiểu cách làm nhé!
Bước 1: Thêm HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scroll Indicator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
<h2>Scroll Indicator</h2>
<div class="process-container">
<div class="process-bar" id="myBar"></div>
</div>
</div>
<div class="content">
<h3>Scroll Down to See The Effect</h3>
<p>We have created a "progress bar" to <b>show how far a page has been scrolled</b>.</p>
<p>It also <b>works when you scroll back up</b>.</p>
<p>It is even <b>responsive</b>! Resize the browser window to see the effect.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
<script src="./main.js"></script>
</html>
Bước 2: Thêm CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 2000px;
}
.header {
position: fixed;
top: 0;
width: 100%;
background-color: #f1f1f1;
}
.header h2 {
text-align: center;
}
.process-container {
width: 100%;
height: 8px;
background-color: #CCC;
}
.process-bar {
height: 8px;
width: 0%;
background-color: blue;
}
.content {
padding: 500px 0;
margin: 50px auto 0 auto;
width: 80%;
}
.content h3 {
font-size: 30px;
}
Bước 3: Thêm Javascript
window.onscroll = () => {
let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
let height = document.documentElement.scrollHeight
- document.documentElement.clientHeight;
let scrolled = (winScroll / height) * 100;
document.getElementById('myBar').style.width = scrolled + '%'
}
Full tutorial:
Hoàn thành
Kết thúc hướng dẫn này, chúng ta hy vọng bạn đã có thể nắm vững cách tạo và tùy chỉnh chỉ báo cuộn trang một cách hiệu quả. Bằng việc áp dụng những kiến thức bạn đã học, bạn có thể tạo ra những trang web hấp dẫn và dễ sử dụng hơn bao giờ hết. Chỉ báo cuộn trang sẽ giúp người dùng có trải nghiệm duyệt web trơn tru và thuận tiện hơn, tạo nên một ấn tượng tốt cho khách truy cập. Hãy thử áp dụng những gì bạn đã học và không ngừng khám phá thêm để nâng cao kỹ năng của mình. Chúc bạn thành công trong việc phát triển và tối ưu hóa trang web của mình!
Các bài viết liên quan: