Trong khi lướt qua các trang web, việc cuộn đến một phần tử sẽ giữ cho người dùng tập trung bằng cách thu hút sự chú ý của họ trong một thời gian dài. Chức năng này có thể được áp dụng khi người dùng cần cuộn chỉ bằng một cú nhấp chuột hoặc, trong trường hợp kiểm tra tự động, để kiểm tra ngay nội dung đã thêm ở cuối trang. Trong những tình huống như vậy, việc cuộn đến một phần tử trong JavaScript sẽ bổ sung thêm chức năng được áp dụng với một cú nhấp chuột mà không cần nhiều sự tương tác của người dùng và tiết kiệm thời gian.
Sách hướng dẫn này sẽ hướng dẫn bạn cuộn đến một phần tử bằng JavaScript.
Làm thế nào để cuộn đến một phần tử bằng JavaScript?
Để cuộn đến một phần tử bằng JavaScript, bạn có thể sử dụng:
-
- “ cuộn vào xem() ' phương pháp
- “ cuộn () ' phương pháp
- “ scrollTo () ' phương pháp
Các cách tiếp cận được đề cập sẽ được minh họa từng cái một!
Phương pháp 1: Cuộn đến một phần tử trong JavaScript Sử dụng phương thức scrollIntoView ()
Các ' cuộn vào xem() ”Phương thức cuộn một phần tử vào vùng hiển thị của Mô hình Đối tượng Tài liệu (DOM). Phương pháp này có thể được áp dụng để lấy HTML được chỉ định và áp dụng phương pháp cụ thể cho nó với sự trợ giúp của sự kiện onclick.
Cú pháp
element.scrollIntoView ( căn chỉnh )
Trong cú pháp đã cho, “ căn chỉnh ”Cho biết kiểu căn chỉnh.
Thí dụ
Trong ví dụ sau, hãy thêm tiêu đề sau bằng cách sử dụng “ ' nhãn:
< h2 > Nhấp vào nút để cuộn đến phần tử. h2 >
Bây giờ, hãy tạo một nút với “ trong một cái nhấp chuột 'Sự kiện gọi hàm' scrollElement () :
< br >
Sau đó, chỉ định nguồn hình ảnh và id của nó để được cuộn:
Cuối cùng, hãy xác định một hàm có tên là “ scrollElement () 'Sẽ tìm nạp phần tử bắt buộc bằng cách sử dụng' document.getElementById () ”Và áp dụng phương thức scrollIntoView () trên nó để cuộn hình ảnh:
var element = document.getElementById ( 'div' ) ;
element.scrollIntoView ( ) ;
}
Mã CSS
Trong mã CSS, hãy áp dụng các kích thước sau để điều chỉnh kích thước hình ảnh bằng cách tham khảo id hình ảnh “ div ”:
#div {chiều cao: 800px;
chiều rộng: 1200px;
tràn: tự động;
}
Đầu ra tương ứng sẽ là:
Phương pháp 2: Di chuyển đến một phần tử trong JavaScript Sử dụng phương thức window.scroll ()
Các ' window.scroll () ”Phương thức cuộn cửa sổ theo các giá trị tọa độ trong tài liệu. Phương pháp này có thể được triển khai để tìm nạp id hình ảnh, đặt tọa độ của nó bằng một hàm và cuộn hình ảnh đã chỉ định.
Cú pháp
window.scroll ( x-coord, y-coord )
Trong cú pháp trên, “ x-coord 'Đề cập đến tọa độ X và' y-coord ”Chỉ ra tọa độ Y.
Ví dụ sau đây giải thích khái niệm đã nêu.
Thí dụ
Lặp lại các bước tương tự để thêm tiêu đề, tạo nút, áp dụng sự kiện onclick và chỉ định nguồn hình ảnh với id của nó:
< h2 > Nhấp vào nút để cuộn đến phần tử. h2 >< cái nút trong một cái nhấp chuột = 'scrollElement ()' > Phần tử cuộn cái nút >
< br >
< hình ảnh src = 'image.PNG' Tôi = 'div' >
Tiếp theo, xác định một hàm có tên là “ scrollElement () ”. Ở đây, chúng tôi sẽ điều chỉnh tọa độ bằng cách sử dụng “ window.scroll () 'Bằng cách truy cập hàm có tên' Chức vụ() ”Và áp dụng nó trên phần tử hình ảnh đã tìm nạp:
window.scroll ( 0 , Chức vụ ( document.getElementById ( 'div' ) ) ) ;
}
Sau đó, xác định một hàm có tên là “ Chức vụ() ”Lấy một biến obj làm đối số của nó. Ngoài ra, hãy áp dụng “ offsetParent Thuộc tính ”, sẽ truy cập tổ tiên gần nhất không có vị trí tĩnh và trả về. Sau đó, tăng giá trị hàng đầu hiện tại được khởi tạo với sự trợ giúp của “ offsetTop ' hàng đầu hiện tại ”Khi điều kiện đã thêm được đánh giá là đúng:
nơi hiện tại = 0 ;
nếu ( obj.offsetParent ) {
làm {
currenttop + = obj.offsetTop;
} trong khi ( ( obj = obj.offsetParent ) ) ;
trở về [ hiện tại ] ;
}
}
Cuối cùng, tạo kiểu cho vùng chứa đã tạo theo yêu cầu của bạn:
chiều cao: 1000px;
chiều rộng: 1000px;
tràn: tự động;
}
Đầu ra
Phương pháp 3: Di chuyển đến một phần tử trong JavaScript Sử dụng phương thức scrollTo ()
Các ' scrollTo () ”Phương thức cuộn tài liệu được chỉ định đến tọa độ được chỉ định. Phương pháp này có thể được triển khai tương tự để lấy phần tử bằng cách sử dụng id của nó và thực hiện chức năng cần thiết để cuộn hình ảnh cụ thể trên DOM.
Cú pháp
window.scrollTo ( x và y )
Nơi đây, ' x ' và ' Y ”Chỉ vào tọa độ x và y.
Hãy xem ví dụ sau.
Thí dụ
Trước tiên, hãy lặp lại các bước đã thảo luận ở trên để thêm tiêu đề, nút có sự kiện onclick và hình ảnh như sau:
< h2 > Nhấp vào nút để cuộn đến phần tử. h2 >< cái nút trong một cái nhấp chuột = 'scrollElement ()' > Phần tử cuộn cái nút >
< br >
< img src = 'image.JPG' Tôi = 'div' >
Tiếp theo, xác định một hàm có tên là “ scrollElement () ”Và đặt cuộn bằng cách gọi phương thức Position () trong phương thức scrollTo ():
window.scrollTo ( 0 , Chức vụ ( document.getElementById ( 'div' ) ) ) ;
}
Cuối cùng, xác định một hàm có tên Position () và áp dụng tương tự các bước đã thảo luận ở trên để thiết lập tọa độ của hình ảnh được chỉ định:
nơi hiện tại = 0 ;
nếu ( obj.offsetParent ) {
làm {
currenttop + = obj.offsetTop;
} trong khi ( ( obj = obj.offsetParent ) ) ;
trở về [ hiện tại ] ;
}
}
Đầu ra
Chúng tôi đã thảo luận về tất cả các phương pháp thuận tiện để cuộn đến một phần tử bằng JavaScript.
Sự kết luận
Để cuộn đến một phần tử trong JavaScript, hãy sử dụng “ cuộn vào xem() 'Để truy cập phần tử và áp dụng chức năng được chỉ định,' window.scroll () ' scrollTo () ”Để tìm nạp phần tử và cuộn nó cho phù hợp. Blog này đã trình bày khái niệm cuộn đến một phần tử bằng JavaScript.