Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách Smooth Scroll Đến Cuối Trang Với JavaScript & CSS

Học cách cuộn mượt (smooth scroll) người dùng đến cuối trang web dài, với JavaScript và chút CSS.

Nếu muốn cho user khả năng smooth scroll đến cuối trang, dùng thuộc tính CSS scroll-behavior và phương thức JavaScript scrollIntoView().

Bạn cần:

  • trang web dài đủ nội dung kích hoạt thanh cuộn dọc (y-axis) bên phải trình duyệt
  • anchor element ở đầu trang có id
  • bất kỳ element nào có id ở cuối trang
  • thuộc tính CSS scroll-behavior
  • phương thức JavaScript scrollIntoView()

Học qua ví dụ!

Ví dụ layout HTML

Dùng markup HTML sau để học (tự do thay <p>....</p> dummy elements bằng nội dung thật):

<main> <p><a id="scroll-to-bottom">Scroll to bottom</a></p> <p>....</p> ... (nhiều p) ... <p id="page-bottom">Bạn đã đến cuối trang này!!</p> </main>

Chú ý: có một anchor element <a> ở đầu với id scroll-to-bottom, và một element ở cuối với id page-bottom.

CSS

Để kích hoạt smooth scrolling, thêm vào stylesheet:

html { scroll-behavior: smooth; } /* Layout */ main { max-width: 700px; margin: 3rem auto; padding: 0 1rem; } #scroll-to-bottom { font-weight: bold; color: green; }

Lưu ý: phép màu cuộn đến từ scroll-behavior: smooth;, phần CSS còn lại chỉ trang trí.

JavaScript

Để smooth scroll user từ đầu đến cuối trang khi click Scroll to Bottom, thêm JS:

let scrollToBottom = document.querySelector("#scroll-to-bottom") let pageBottom = document.querySelector("#page-bottom") scrollToBottom.addEventListener("click", function() { pageBottom.scrollIntoView() })

Cách code JavaScript hoạt động

  • Khai báo hai biến tham chiếu scroll-to-bottom và page-bottom.
  • Gắn event listener cho scrollToBottom lắng nghe click events.
  • Bên trong function() { .. } gắn phương thức scrollIntoView() cho element cuối trang pageBottom.

Bây giờ khi ai click scroll to bottom, function thực thi scrollIntoView cuộn user đến cuối nơi id page-bottom nằm.

Lưu ý: nếu bỏ scroll-behavior: smooth; cuộn vẫn diễn ra về mặt kỹ thuật, nhưng đột ngột.

Bạn cũng có thể làm smooth scroll thuần vanilla JS (không dùng CSS property) nhưng cần nhiều code hơn ví dụ này.

Xem toàn bộ demo code.

Scroll to bottom hữu ích thực tế như thế nào?

Một use case: cho phép khách truy cập nhanh chóng cuộn đến phần tóm tắt nội dung dài mà họ không có thời gian đọc ngay.

Tương thích trình duyệt

Thuộc tính CSS scroll-behavior không tương thích Internet Explorer hoặc Safari. Với trình duyệt đó, cần giải pháp thuần JavaScript.