Cách cuộn lên đầu trang trình duyệt bằng JavaScript

adminBạn nghĩ gì về bài viết này?

Đôi khi, chúng ta muốn cuộn lên đầu trang trình duyệt bằng JavaScript nhưng không biết làm cách nào?

Trong bài viết này, cùng mình xem xét cách cuộn lên đầu trang trình duyệt bằng JavaScript.

Google Chrome: Sử dụng Tiện ích mở rộng Tự động cuộn

Nếu bạn đang sử dụng Chrome, sẽ dễ dàng hơn nhiều khi sử dụng tiện ích mở rộng được xây dựng dành riêng cho trình duyệt để đạt được điều này. Chúng tôi nhận thấy rằng không có tiện ích mở rộng nào khác của Chrome tốt bằng Tự động cuộn khi nói đến việc bắt chước chức năng cuộn tự động của cú nhấp chuột giữa của Windows.

Để cài đặt Tự động cuộn, hãy điều hướng đến trang tiện ích mở rộng và nhấp vào Add to Chrome. Khi hoàn tất, bạn sẽ thấy hình chữ thập đa hướng xuất hiện trong thanh tiện ích mở rộng, ở bên phải thanh địa chỉ của bạn.

Bạn sẽ cần khởi động lại Chrome để tiện ích mở rộng hoạt động bình thường. Bạn có thể làm điều đó bằng cách đóng và mở lại trình duyệt của mình theo cách thủ công hoặc nếu muốn giữ nguyên các tab của mình, bạn có thể nhập “chrome://restart ”Vào thanh địa chỉ của bạn và nhấn Enter.

Khi khởi động lại Chrome, nhấp chuột phải vào biểu tượng tiện ích mở rộng Tự động cuộn và chọn Options.

Các tùy chọn ở đây đều tự giải thích khác với các tùy chọn trong Basic bàn. Các tùy chọn này cho phép bạn đặt một dải pixel mà con trỏ của bạn phải ở trong để kích hoạt tự động cuộn.

Những thay đổi ban đầu duy nhất mà chúng tôi khuyên bạn nên thực hiện ở đây là tùy ý vô hiệu hóa một trong hai tùy chọn dưới cùng trong Basic bàn. Nếu bạn đã sử dụng phím tắt MMB (nhấp chuột giữa) hoặc Ctrl + LMB (nhấp chuột trái) cho những việc khác, bạn có thể muốn tắt một trong số chúng để tránh xung đột.

Sau đó, hãy kiểm tra cảm giác của Tự động cuộn bằng cách truy cập trang web có nội dung có thể cuộn — tôi đề nghị Bộ phận trợ giúp Geek. Nhấn MMB hoặc Ctrl + LMB để xem tiện ích mở rộng có hoạt động hay không. Sau đó, bạn sẽ thấy hình chữ thập hai chiều bên dưới con trỏ của mình. Mặc dù nó chỉ hiển thị trực quan lên và xuống dưới dạng chỉ đường, bạn cũng có thể cuộn sang trái, phải và bất kỳ theo đường chéo nào.

Sử dụng phương pháp window.scrollTo cuộn lên đầu trang trình duyệt bằng JavaScript

Bạn có thể sử dụng phương thức window.scrollTo với tọa độ x và y để cuộn đến dưới dạng đối số tương ứng.

Ví dụ: nếu chúng ta có HTML sau:

<div>

</div>
<button>
  scroll to top
</button>Code language: HTML, XML (xml)

Sau đó, chúng ta có thể viết JavaScript sau để thêm các phần tử con vào div và làm cho nút cuộn lên đầu trang bằng cách viết:

const button = document.querySelector('button')
const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}

button.addEventListener('click', () => {
  window.scrollTo(0, 0);
})Code language: JavaScript (javascript)

Tôi có vòng lặp cho để thêm các phần tử với document.createElement.

Và sau đó chúng tôi đặt textContent thành một số nội dung.

Sau đó, tôi gọi appendChild để thêm các yếu tố.

Tiếp theo, tôi gọi button.addEventListener với 'click' để thêm một người nghe nhấp chuột.

Chúng tôi gọi scrollTo với 0 và 0 để cuộn lên đầu trang.

Vì vậy, khi bạn nhấp vào ‘cuộn lên trên cùng’, bạn sẽ đi đến đầu trang.

Bạn cũng có thể thay đổi hành vi cuộn bằng một đối tượng để thay đổi hành vi cuộn.

Ví dụ, bạn có thể viết:

button.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: `smooth`
  })
})Code language: JavaScript (javascript)

top được đặt thành 0 để cuộn lên trên cùng.

behavior được thiết lập 'smooth' để làm cho việc cuộn trơn tru.

Kết luận

Qua bài viết trên, tôi đã giúp bạn có thể cuộn lên đầu trang bằng phương pháp window.scrollTo này.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận