Tạo hiệu ứng cuộn mượt (Smooth Scrolling) chỉ với CSS

CSS3 cung cấp thuộc tính scroll-behavior: smooth để bật cuộn mượt cho toàn bộ trang mà không cần JavaScript. Đây là cách đơn giản nhất:

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<style>
  html {
    scroll-behavior: smooth;
  }
  * {
    box-sizing: border-box;
  }
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
  }
  #firstSection {
    height: 100vh;
    background-color: rgb(119, 77, 219);
    color: white;
    padding: 20px;
  }
  #secondSection {
    height: 100vh;
    color: white;
    background-color: rgb(42, 128, 168);
    padding: 20px;
  }
  a {
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    color: yellow;
  }
</style>
</head>
<body>
<h1>Ví dụ Smooth Scroll</h1>
<div id="firstSection">
  <h2>Phần 1</h2>
  <p>Nhấp vào liên kết để xem hiệu ứng cuộn "mượt".</p>
  <a href="#secondSection">Nhấp đây để cuộn mượt đến Phần 2 bên dưới</a>
</div>
<div id="secondSection">
  <h2>Phần 2</h2>
  <a href="#firstSection">Nhấp để cuộn mượt lên Phần 1</a>
</div>
</body>
</html>

Giải thích

• scroll-behavior: smooth - Áp dụng cho html để bật cuộn mượt toàn trang
• Liên kết neo (anchor links) - Sử dụng href="#id" để trỏ đến section
• height: 100vh - Mỗi section chiếm toàn màn hình để thấy rõ hiệu ứng

Hỗ trợ trình duyệt

Hỗ trợ tốt trên Chrome 61+, Firefox 36+, Safari 15+, Edge 79+. Trên các trình duyệt cũ, cuộn sẽ nhảy ngay lập tức (fallback tự nhiên).