Cách tạo: Cuộn mượt

Học cách sử dụng CSS để tạo hiệu ứng cuộn mượt.

cuộn mượt mà

Section 1
bấm tôi, cuộn mượt mà xuống phần 2 dưới cùng.

Bấm liên kết để xem hiệu ứng cuộn mượt mà.

Lưu ý:Bỏ thuộc tính scroll-behavior để hủy cuộn mượt mà.

cuộn mượt mà

thêm vào phần tử <html> scroll-behavior: smooth Có thể bật cuộn mượt mà toàn trang:

Lưu ý:cũng có thể thêm vào phần tử/cont容 cuộn cụ thể.

ví dụ

html {
  scroll-behavior: smooth;
}

thử trực tiếp

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ tính năng cuộn mượt mà.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0

giải pháp đa trình duyệt

cho trình duyệt không hỗ trợ scroll-behavior cho trình duyệt hỗ trợ thuộc tính này, bạn có thể sử dụng JavaScript hoặc thư viện JavaScript (như jQuery）để tạo ra giải pháp hỗ trợ tất cả các trình duyệt:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Thêm cuộn mượt mà cho tất cả các liên kết
  $("a").on('click', function(event) {
    // Trước khi thay thế hành vi mặc định, đảm bảo rằng this.hash có giá trị
    if (this.hash !== "") {
      // Ngăn chặn hành vi nhấp mặc định của thẻ liên kết
      event.preventDefault();
      // Lưu giá trị hash
      var hash = this.hash;
      // Sử dụng phương thức animate() của jQuery để thêm cuộn trang mượt mà
      // Số nguyên (800) tùy chọn chỉ định số giây cần thiết để cuộn đến khu vực cụ thể
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Sau khi cuộn xong, thêm dấu số (#) vào URL (hành vi nhấp mặc định)
        window.location.hash = hash;
      });
    } // Kết thúc if
  });
});
</script>

thử trực tiếp

Trang liên quan

Tài liệu tham khảo:Thuộc tính CSS scroll-behavior