Cách triển khai cuộn mượt mà trong JavaScript

Kandy parfume

Smooth scrolling là một kỹ thuật được dùng trong phát triển web để tạo trải nghiệm cuộn mượt mà cho người dùng. Dưới đây là cách triển khai cuộn mượt trong JavaScript.

Cuộn mượt trong JavaScript

Smooth Scrolling là gì?

Smooth scrolling là khi một trang web cuộn mượt mà tới phần mong muốn, thay vì nhảy tới đó ngay lập tức. Điều này mang tới trải nghiệm cuộn thoải mái & liền mạch cho người dùng.

Lợi ích của Smooth Scrolling

Cuộn mượt mà có thể cải thiện trải nghiệm người dùng của trang web theo một số cách:

Nâng cao chất lượng hình ảnh bằng cách loại bỏ các bước nhảy cuộn đột ngột, tăng thêm vẻ sang trọng cho giao diện.
Khuyến khích người dùng tương tác qua thao tác cuộn liền mạch, mượt mà.
Giúp người dùng điều hướng dễ dàng hơn, nhất là khi phải xử lý trang web dài hoặc di chuyển giữa các phần khác nhau.

Cách tạo smooth scrolling trong JavaScript

Để triển khai cuộn mượt, bạn có thể chỉnh sửa hành vi cuộn mặc định bằng JavaScript.

Cấu trúc HTML

Đầu tiên, tạo thành phần markup cần thiết cho các cổng xem khác nhau và điều hướng để cuộn giữa chúng.

<!DOCTYPE html> 
<html lang="en">

<head>
 <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./style.css" /> 
  <title>Smooth Scrolling Guide for Web Developers</title> 
</head> 

<body> 
  <nav> 
    <ul> 
      <li><a href="#section1">Section 1</a></li> 
      <li><a href="#section2">Section 2</a></li> 
      <li><a href="#section3">Section 3</a></li> 
    </ul>
  </nav>

  <section id="section1"> 
    <h2>Section 1</h2> 
  </section> 

  <section id="section2"> 
    <h2>Section 2</h2> 
  </section> 

  <section id="section3"> 
    <h2>Section 3</h2> 
  </section> 

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

</html>

HTML này chứa thanh điều hướng bao gồm 3 thẻ anchor. Thuộc tính href của mỗi anchor chỉ định mã định danh duy nhất của phần mục tiêu (ví dụ: section1, section2, section3). Điều này đảm bảo mỗi link bạn click vào điều hướng tới thành phần mục tiêu tương ứng.

Kiểu CSS

Tiếp theo, áp dụng một số CSS để làm trang hiện hấp dẫn và có tổ chức. Thêm code sau vào style.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

nav {
  background: #fff;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
  position: sticky;
  top: 0;
  padding: 30px;
}

nav ul {
  display: flex;
  gap: 10px;
  justify-content: center;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  border-radius: 5px;
  border: 1.5px solid #909090;
  text-decoration: none;
  color: #333;
  padding: 10px 20px;
}

section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Điều này sẽ hiện link dưới dạng một hàng nút bấm và mỗi section dưới dạng một thành phần có chiều cao đầy đủ. Thế nhưng lưu ý cách click một link khiến trình duyệt nhảy ngay tới phần tương ứng, không có hiệu ứng động.

Hiệu ứng cuộn mượt được tạo bằng JavaScript

Triển khai trong JavaScript

Để thêm hiệu ứng mượt mà khi bạn click vào thẻ anchor, dùng scrollIntoView(). Hàm scrollIntoView() có sẵn trong JavaScript của class Element, cho phép bạn cuộn một thành phần vào vùng hiển thị của cửa sổ trình duyệt.

Khi gọi phương thức này, trình duyệt điều chỉnh vị trí cuộn của container của phần tử (như cửa sổ hoặc container có thể cuộn) để làm thành phần hiển thị.

Thêm code JavaScript vào file script.js. Bắt đầu bằng cách lắng nghe sự kiện DOMContentLoaded kích hoạt trước khi làm việc khác. Điều này đảm bảo callback chỉ chạy khi DOM được tải đầy đủ và sẵn sàng thao tác.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Tiếp theo, xác định hàm makeLinksSmooth(). Bắt đầu bằng cách chọn tab anchor trong navigation, bởi bạn sẽ muốn chỉnh sửa hành vi của chúng. Sau đó, lặp qua từng link, và thêm một trình nghe sự kiện cho sự kiện click của nó.

function makeLinksSmooth() { 
  const navLinks = document.querySelectorAll("nav a"); 

  navLinks.forEach((link) => {
    link.addEventListener("click", smoothScroll);
  });
}

Cuối cùng, xác định hàm smoothScroll() nhận một đối tượng nghe sự kiện. Gọi preventDefault() để đảm bảo trình duyệt không triển khai tác vụ mặc định khi bạn click vào link. Đoạn mã sau sẽ thay thế nó.

Lấy giá trị href của thẻ anchor hiện tại và lưu nó trong một biến. Giá trị đó sẽ là ID của phần mục tiêu, với tiền tố “#”, vì thế, hãy dùng nó để chọn phần tử của section qua querySelector(). Nếu targertElement hiển thị, chạy scrollIntoView của nó và chuyển hành vi “smooth” trong một tham số đối tượng để hoàn thành hiệu ứng.

function smoothScroll(e) {
  e.preventDefault();
  const targetId = this.getAttribute("href");
  const targetElement = document.querySelector(targetId);

  if (targetElement) { 
    targetElement.scrollIntoView({ behavior: "smooth", });
  }
}

Giờ trang web hoàn thiện của bạn sẽ cuộn mượt mà tới từng phần khi bạn click vào một link.

Tinh chỉnh smooth scrolling

Để nâng cao hơn trải nghiệm cuộn mượt mà, bạn có thể tinh chỉnh các khía cạnh cụ thể.

Điều chỉnh vị trí cuộn

Bạn có thể điều chỉnh vị trí theo chiều dọc của thao tác cuộn bằng thuộc tính block của đối số cài đặt. Dùng các giá trị như “start”, “center” hoặc “end” để xác định section của phần tử mục tiêu muốn cuộn tới:

targetElement.scrollIntoView({ behavior: "smooth", block: "end" });

Thêm hiệu ứng gia tốc

Áp dụng hiệu ứng gia tốc cho hoạt ảnh cuộn để tạo chuyển tiếp hấp dẫn tự nhiên và trực quan hơn. Các hàm gia tốc như ease-in, ease-out hay đường cong hình khối tùy chỉnh có thể kiểm soát khả năng tăng tốc & giảm tốc của chuyển động cuộn. Bạn có thể dùng hàm định vị thời gian tùy biến với thuộc tính CSS scroll-behavior hoặc một thư viện JavaScript như “smooth-scroll” để đạt được kết quả tương tự.

/* CSS để áp dụng hiệu ứng gia tốc */ 
html {
  scroll-behavior: smooth;

  /* Tùy biến gia tốc cubic-bezier */
  scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}

Đảm bảo rằng triển khai cuộn mượt mà hoạt động nhất quán trên các trình duyệt khác nhau. Kiểm tra và xử lý bất kỳ lỗi hoặc sự không nhất quán có thể phát sinh.

Bạn có thể dùng web như Can I Use để kiểm tra hỗ trợ trình duyệt khi xây dựng. Cân nhắc dùng một thư viện JavaScript hoặc polyfill để đảm bảo khả năng tương thích chéo trình duyệt và cung cấp một trải nghiệm liền mạch cho tất cả người dùng.

Cuộn mượt trong JavaScript

Cuộn mượt thêm nét đẹp tinh tế và nâng cao trải nghiệm người dùng bằng cách tạo hiệu ứng cuộn mượt mà, bắt mắt. Chỉ cần làm theo các bước hướng dẫn ở trên, lập trình viên web dễ dàng triển khai cuộn mượt mà bằng JavaScript.

Thứ Ba, 08/08/2023 14:39

5 ★ 1 👨 635

#JavaScript