Cuộn mượt mà bằng jQuery mang lại giao diện người dùng tốt hơn cho dự án web. Cuộn mượt mà giúp người dùng giảm nỗ lực cuộn để đến một phần nhất định của trang. Với cuộn mượt mà, người dùng có thể đến một phần cụ thể của trang bằng cách nhấp vào liên kết neo hoặc nút.

Phương thức jQuery scrollTop cung cấp một cách dễ dàng để cuộn đến phần tử div. Bạn cũng có thể thêm hoạt ảnh khi cuộn trang bằng phương thức jQuery animate() . Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách triển khai cuộn mượt mà đến div bằng jQuery mà không cần cuộn thủ công.

Cuộn đến Div

Chức năng Scroll to Div rất hữu ích cho các trang web một trang. Nó giúp người dùng chuyển đến phần trang cụ thể mà không cần cuộn trang theo cách thủ công. Trong ví dụ này, đoạn mã scroll to div, người dùng có thể nhảy đến phần cụ thể của trang bằng cách nhấp vào liên kết neo bằng jQuery.

Đoạn mã jQuery cuộn tới div sau đây sẽ đưa bạn đến phần cụ thể của trang bằng cách nhấp vào liên kết tương ứng.

Mã HTML:
Chỉ định ID phần tử có tiền tố dấu thăng (#) trong giá trị thuộc tính href của thẻ neo.

// xử lý các liên kết với @href chỉ bắt đầu bằng '#'
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

Để sử dụng jQuery bạn cần phải thêm thư viện jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Ok rồi thử thôi nào!