Hướng dẫn thêm nút trượt lên đầu trang đơn giản

Bạn truy cập nhiều website sẽ thấy có nút “Back to top” hay còn gọi là “Lên đầu trang” nằm ở góc phải website giúp người dùng di chuyển lên đầu trang một cách nhanh chóng mà không cần cuộn chuột.

Nếu bạn đang sử dụng đoạn mã “Back to top” mà sau khi bấm xong nó hiện thêm dấu # phía sau địa chỉ trang web thì có vẻ nhìn khá chuối đúng không nào. Bài viết này sẽ hướng dẫn bạn làm một nút lên đầu trang đơn giản mà hiệu quả.

Tiến hành.

Thêm đoạn mã sau và footer (nếu bạn đang sử dụng mã nguồn wordpress thì chèn nó ngay sau </footer> là đẹp).

<a id="top-btn" href="javascript:void(0);" class="hidden">TOP</a>

<script>
var button = document.getElementById("top-btn");

window.onscroll = function() {
if (window.scrollY > 200) {
button.classList.add("top-btn-is-visible");
} else {
button.classList.remove("top-btn-is-visible");
}
};

button.addEventListener("click", function(event) {
event.preventDefault();
window.scrollTo({top: 0, behavior: "smooth"});
});
</script>

Còn đây là css

#top-btn.top-btn-is-visible {
visibility: visible;
opacity: 1;
}

#top-btn {
opacity: 0;
z-index: 99;
right: 0.9rem;
width: 2.813rem;
bottom: 0.9rem;
height: 2.813rem;
display: flex;
-webkit-box-align: center;
-webkit-box-pack: center;
position: fixed;
visibility: hidden;
align-items: center;
justify-content: center;
background-color: rgb(84, 136, 199);
line-height: 1.6;
font-size: 0.875rem;
overflow: hidden;
text-decoration: none;
border-radius: 0.188rem;
}

#top-btn {
font-size: 0.9rem;
color: rgb(255, 255, 255);
}

Bạn có thể điều chỉnh lại css nút TOP theo sở thích của bạn.

Và kết quả chúng ta sẽ có một nút TOP ở góc phải phía dưới màn hình khi cuộn xuống.

Chúc các bạn thành công.