Cách di chuyển đến thẻ Div có ID bất kỳ bằng JavaScript

Tram Ho

Đôi khi, chúng ta muốn chuyển đến phần tử có ID bất kỳ bằng cách sử dụng JavaScript.

Trong bài viết này, mình sẽ giới thiệu cách cuộn đến một phần tử bất kỳ bằng cách sử dụng JavaScript.

Sử dụng location.href và history.replaceState

Chúng ta có thể sử dụng thuộc tính location.href để lấy URL và bỏ quan phần hashtag #. Ví dụ: https://itzone/u/Clarence161095#fullname thì location.href sẽ bỏ #fullname và chỉ lấy https://itzone/u/Clarence161095.

Sau đó, chúng ta có thể nối thêm hashtag # tùy ý vào vào nó.

ví dụ chúng ta có code HTML như sau:

Sau đó, chúng ta có thể thêm một button để cuộn xuống div có ID là b khi click:

Chúng ta có hàm jump với tham số h là ID của phần tử mà chúng ta muốn cuộn đến.

Tiếp theo, chúng ta lấy URL hiện tại với location.href.

Sau đó, chúng ta thêm hashtag # có ID là h vào nó để chuyển đến phần tử có ID h.

Và sau đó chúng ta gọi history.replaceState với url làm đối số thứ 3 để thay thế URL có hashtag # bằng URL gốc.

Tiếp theo, chúng ta sử dụng document.querySelector để get phần từ button.

Và sau đó chúng ta gọi addEventListener với sư kiện 'click' để thêm click listener.

Đối số thứ 2 là một hàm callback gọi hàm jump và truyển 'b' để cuộn đến div với ID b.

Tóm tắt

Chúng ta có thể sử dụng thuộc tính location.href để lấy URL mà không cần hashtag #.

Sau đó, chúng ta nối hashtag # vào nó.

Và sau đó chúng ta có thể xóa hashtag # khỏi URL trong thanh URL bằng history.replaceState.

Roundup

Như mọi khi, mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo!

Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé. Thank you.

Ref

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo