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é.

Nội dung chính

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

Ý tưởng

"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".

+ 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.

Bài viết cùng chủ đề

Bài 22: Tạo hiệu ứng chuyển động với thư viện…

Bài 21: Tạo bảng có tính năng lọc và tìm kiếm với…

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì.

Hình ảnh cho demo cách hiệu ứng cuộn trang one page - scrollspy — Ví dụ thực tế cách tạo hiệu ứng cuộn trang one page – scrollspy

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 #).

<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ệ

JavaScript jQuery