Bài 5: Cách tạo hiệu ứng cuộn trang one page – scrollspy

Trong bài học này, mình sẽ hướng dẫn các bạn cách tạo hiệu ứng cuộn trang one page – scrollspy. Trong Bootstrap 4 cũng có sẵn hiệu ứng Scrollspy này, chúng ta sẽ làm thử và so sánh nhé.

Video – Cách tạo hiệu ứng cuộn trang one page – scrollspy

Ý tưởng

+ Thanh menu cố định

+ Chọn vào mục nào của menu sẽ tự động cuộn trang đến phần đó.

+ Hiệu ứng này có rất nhiều tên gọi như cuộn trang one page, scrollspy. Thường được dùng cho landing page, các website giới thiệu sản phẩm hay sự kiện nào đó mà cần yếu tố hình ảnh, hiệu ứng để thu hút người dùng.

+ Nâng cao: Sử dụng thư viện EasingJS để tạo gia tốc cho hiệu ứng mượt mà hơn.

Kiến thức mới: hàm attr() để lấy giá trị thuộc tính thẻ html.

Phần HTML

Phần này mình làm khá ít vì chủ yếu là hình để tiết kiệm thời gian

Điều quan trọng là href của thẻ a và id của thẻ h2 phải giống nhau (thẻ a thêm dấu #).

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

<header>
<nav class="menu">
   <ul>
      <li><a href="#part-1">Part 1</a></li>
      <li><a href="#part-2">Part 2</a></li>
      <li><a href="#part-3">Part 3</a></li>
   </ul>
</nav>
</header>
<div class="main">
<div class="noi-dung"></div>
<div class="part part-1"><h2 id="part-1">Phần 1</h2></div>
<div class="noi-dung"></div>
<div class="part part-2"><h2 id="part-2">Phần 2</h2></div>
<div class="noi-dung"></div>
<div class="part part-3"><h2 id="part-3">Phần 3</h2></div>
</div>

Phần CSS

khá dài nên mình không trích dẫn mà sẽ để trong code ở cuối bài nhé

Phần JS – jQuery

Đây là phần chính của bài học. Để tạo hiệu ứng scrollspy, các bạn dùng code sau nhé.

Thêm thư viện Easing để tạo gia tốc:

+ Link CDN: các bạn thêm thẻ script có src theo link này nhé:  https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js

+ Hoặc tải file jqueryEasing theo link này Download

Code cuối cùng của chúng ta như sau. Trong bài mình đi từng bước từ cơ bản đến nâng cao, nên bạn nào không hiểu xem video chi tiết nhé.

$(document).ready(function() {

$('.menu a').click(function(event) {
event.preventDefault();

part = $(this).attr('href'); // lấy id của thẻ h2 tương ứng

position = $(part).offset().top; // tìm vị trí thẻ h2

$('html, body').animate({scrollTop: position},1400,'easeInOutSine');
});
});

+ Chúng ta sẽ lấy giá trị thuộc tính href của thẻ a khi click vào. Gán cho một biến

+ Tìm vị trí thẻ cần cuộn trang đến bằng cách dùng hàm offset().top và tìm theo id (giá trị href vừa lấy). Do tìm theo id nên chúng ta để sẵn dấu # trong href

+ Dùng hàm animate để cuộn. Thêm thuộc tính từ thư viện Easing để hiệu ứng cuộn mượt mà hơn.

+ Các bạn có thể chọn hiệu ứng cuộn một cách trực quan trên trang: https://easings.net/vi

Ngoài ra, trong BOotstrap cũng cung cấp cho chúng ta hiệu ứng scrollspy nhưng không tùy biến cao bằng làm bằng jquery. Tham khảo bài scrollpsy bootstrap nhé.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ