Giới thiệu
Bất cứ khi nào bạn có một trang web nhắc người dùng cuộn xuống một đoạn dài – cung cấp một nút để cuộn trở lại đầu trang là một cử chỉ hay!
Trong hướng dẫn thực hành này, chúng ta sẽ tìm hiểu cách tạo nút HTML/CSS/JS động để cuộn lên đầu trong Vanilla JavaScript.
Lưu ý: Mã nguồn và bản xem trước trực tiếp có sẵn trên CodePen.
Bắt đầu
Chúng tôi sẽ tạo chức năng từ đầu và tạo kiểu cho nó. Sử dụng một querySelector(), chúng tôi sẽ chọn nút đã tạo và bật và tắt chế độ hiển thị của nút đó dựa trên vị trí của người dùng trên trang, đồng thời kích hoạt sự kiện cuộn lên đầu sau mỗi lần nhấp chuột.
Nếu bạn muốn đọc về cách tạo cuộn lên trên trong React, hãy đọc Cách cuộn lên đầu trong React bằng thành phần nút!
Vì nút được cố định ở một vị trí nhất định (dưới cùng bên phải) bằng CSS position các thuộc tính, đánh dấu cho chức năng này có thể được chèn vào bất kỳ đâu bên trong body phần tử mã HTML của bạn:
<div className="scroll-to-top"> <span class="btn btn-position btn-style">^</i>
</div>
Sau khi thêm, chúng ta có thể tạo kiểu cho nút và nút cha của nó <div>. Chúng ta sẽ cố định vị trí của nút ở phía dưới bên phải, lệch một chút so với phía dưới và phía bên phải:
.scroll-to-top { position: relative;
} .btn-position { position: fixed; bottom: 40px; right: 25px; z-index: 20;
} .btn-style { background-color: #551b54; border: 2px solid #fff; border-radius: 50%; height: 50px; width: 50px; color: #fff; cursor: pointer; animation: movebtn 3s ease-in-out infinite; transition: all 0.5s ease-in-out; font-size: 40px; display: flex; justify-content: center; align-items: center; visibility: hidden;
}
Chúng tôi đã thiết lập visibility của nút này để hidden theo mặc định, để nút này chỉ xuất hiện khi người dùng cuộn xuống một vị trí cụ thể (trục Y) – chúng tôi sẽ thực hiện việc này bằng cách thay đổi thuộc tính của nó bằng JavaScript sau. Cuối cùng, hãy thêm một di chuột và một số hình ảnh động cho nút để nó không đứng yên:
.icon-style:hover { animation: none; background: #fff; color: #551b54; border: 2px solid #551b54;
} @keyframes movebtn { 0% { transform: translateY(0px); } 25% { transform: translateY(20px); } 50% { transform: translateY(0px); } 75% { transform: translateY(-20px); } 100% { transform: translateY(0px); }
}
Thực hiện logic
Bây giờ nút đã được tạo kiểu và vô hình – hãy triển khai logic làm cho nút này hiển thị khi người dùng cuộn xuống. Chúng tôi sẽ chọn nó thông qua querySelector() và đính kèm một EventListener đến phần tử:
const scrollBtn = document.querySelector(".btn");
Bây giờ, dựa trên vị trí giá trị Y của cửa sổ (người dùng đã cuộn bao nhiêu theo chiều dọc, bắt đầu từ 0) – chúng ta sẽ thiết lập visibility của phần tử để "visible" or "hidden" nếu giá trị Y nằm dưới một ngưỡng nhất định:
const btnVisibility = () => { if (window.scrollY > 400) { scrollBtn.style.visibility = "visible"; } else { scrollBtn.style.visibility = "hidden"; }
};
Bây giờ chúng ta có một hàm mà khi được gọi sẽ kiểm tra xem trang web đã được cuộn xuống chưa 400, và đặt visibility của phần tử nút để visible, nếu không thì nó đặt thành hidden.
Cuối cùng – chúng ta sẽ muốn gọi hàm này nhiều lần để kiểm tra vị trí và điều chỉnh mức độ hiển thị cho phù hợp. Điều này được thực hiện tốt nhất thông qua một người nghe sự kiện kích hoạt chức năng trên mỗi thay đổi cuộn:
document.addEventListener("scroll", () => { btnVisibility();
});
Đoạn mã cuối cùng mà chúng tôi muốn đính kèm vào trình xử lý sự kiện là logic để cuộn người dùng sao lưu theo chương trình khi họ nhấp vào nút. Các scrollToTop() chức năng của window dụ thực hiện điều đó! Chúng ta có thể đặt “top” là gì bằng cách cung cấp tọa độ Y và có thể gọi phương thức trên mỗi "click" sự kiện trên nút:
scrollBtn.addEventListener("click", () => { window.scrollTo({ top: 0, behavior: "smooth" });
});
Lưu ý: window.scrollTo() có một tham số hành vi cho biết quá trình cuộn sẽ tiến triển nhẹ nhàng (trơn tru) hay ngay lập tức trong một bước (auto giá trị mặc định).
Đó là nó! Hãy thử cuộn xuống trang – một nút hoạt hình sẽ xuất hiện. Sau khi thực hiện xong và bạn nhấp vào nó, bạn sẽ được đưa trở lại đầu trang một cách dễ dàng:
Kết luận
Việc cuộn lên đầu trang không khó – ngay cả với trình xử lý sự kiện và hoạt ảnh! Trong hướng dẫn thực hành này, chúng ta đã tìm hiểu cách triển khai chức năng cuộn lên trên bằng Vanilla JavaScript và tạo kiểu cho nút.
