Phương thức để cuộn cửa sổ tới phần tử trong JavaScript

Phương thức scrollIntoView cuộn cửa sổ tới phần tử chỉ định. Phương thức được áp dụng cho phần tử mà cửa sổ cần được cuộn tới. Tham số của phương thức điều chỉnh vị trí phần tử sẽ xuất hiện: ở đầu cửa sổ hay cuối cửa sổ.

Hãy xem các ví dụ. Cuộn cửa sổ sao cho phần tử nằm ở đầu cửa sổ:

elem.scrollIntoView(true);

Và bây giờ hãy cuộn cửa sổ sao cho phần tử nằm ở cuối cửa sổ:

elem.scrollIntoView(false);

Bạn cũng có thể truyền một đối tượng cài đặt làm tham số. Hãy cuộn cửa sổ một cách mượt mà tới phần tử:

elem.scrollIntoView({
	behavior: 'smooth',
});

Đối tượng cài đặt cũng có các tùy chọn căn chỉnh trang so với phần tử. Tùy chọn block đặt căn chỉnh theo chiều dọc, còn tùy chọn inline - theo chiều ngang. Chúng có thể nhận các giá trị sau: 'start', 'center', 'end', 'nearest'.

Hãy thử:

elem.scrollIntoView({
	behavior: 'smooth',
	block: 'start',
	inline: 'end',
});

Cho một phần tử và một nút bấm. Khi nhấp vào nút bấm, hãy cuộn trang tới phần tử đã cho. Hãy thử nghiệm tất cả các khả năng đã được mô tả.