Smooth Scrolling trang web với jQuery

Đối với các trang web dạng Landing Page, việc di chuyển giữa các mục trên trang là chắc chắn phải có. Tuy nhiên làm sao để hoạt động này diễn ra mượt và tự nhiên nhất. Bài viết này sẽ hướng dẫn bạn một cách đơn giản mà hiệu quả để có thể smooth scrolling trang web với jQuery.

Demo

Dưới đây là một ví dụ demo. Bạn có thể nhấn thử vào các button section 1, section 2 và section 3 để thấy sự chuyển động mượt mà của nó.

Cấu trúc trang web với HTML

Để có thể di chuyển đến các mục khác nhau trên trang web, mỗi mục bạn cần phải xác định một id cho nó. Trong ví dụ trên, mình có 3 mục với 3 id lần lượt là: sec1, sec2, sec3.

<div id="sec1">This is section 1</div>
<div id="sec2">This is section 2</div>
<div id="sec3">This is section 3</div>

Tiếp theo là thanh menu (hay navigation), cho phép người dùng lựa chọn sẽ di chuyển tới đâu.

<div id="nav">
  <a href="#sec1">Section1</a>
  <a href="#sec2">Section2</a>
  <a href="#sec3">Section3</a>
</div>

Ở đây, mình sử dụng thẻ a với thuộc tính href là id của mỗi phần tương ứng.

Smooth Scrolling trang web với jQuery

Mặc định, khi người dùng nhấn vào thẻ a thì trang web sẽ nhảy đến vị trí có địa chỉ xác định trong thẻ href. Vì vậy, để có thể smooth scrolling trang web, bạn cần phải bắt sự kiện khi người dùng nhấn thẻ a vào và chặn lại event mặc định.

$("a[href*='#']:not([href='#])").click(function () {
  let target = $(this).attr("href");
  $("html,body")
    .stop()
    .animate(
      {
        scrollTop: $(target).offset().top,
      },
      1000
    );
  event.preventDefault();
});

Trong đó, đoạn code $("a[href='#']:not([href='#])")* ý nghĩa là: lấy ra các thẻ a, với giá trị của thuộc tính href bắt đầu bằng # mà không phải là # (đôi khi người ta hay sử dụng <a href="#"></a> để biểu diễn việc link đến chính trang web hiện tại).

Để chặn việc thực hiện các hoạt động mặc định, bạn có thể sử dụng phương thức preventDefault:

event.preventDefault();

Tiếp theo, sử dụng jQuery để xác định đích đến - chính là id của section đó, hay giá trị của thẻ href. Khi đã có target rồi, bây giờ bạn chỉ cần thêm animation vào thông qua phương thức animate như trên.

Một điều lạ là ở trên, mình có sử dụng phương thức stop. Tại sao vậy?

Vì đôi khi người dùng sẽ nhấn liên tục các button section1, section2, section3. Khi đó, trang web sẽ scroll lần lượt đến từng mục. Điều này là không cần thiết. Thực tế, bạn chỉ cần thực hiện lệnh cuối cùng và bỏ qua các câu lệnh phía trên. Đó là lí do mình sử dụng phương thức stop.

Như vậy, phần thêm animation trên có thể diễn giải thành lời là: chỉ thực hiện event cuối cùng trong chuỗi event liên tiếp; di chuyển (html, body) đến vị trí có top là giá trị top của target; hoạt động này diễn ra trong 1 giây.