Tạo nút trở về đầu trang vô cùng đơn giản back to top

Các bạn truy cập các website, bạn có để ý thấy, hễ ta kéo bài viết xuống một khoảng nhất định, thì wesite sẽ hiển thị một nút ảo trên màn hình, thì nút ảo này cho phép chúng ta click vào để trở về nhanh phần đầu của trang web. Thì đây là một tính năng nhỏ, nhưng vô cùng tiện ích gọi là back to top.
Sau đây mình sẽ hướng dẫn các bạn cách làm cái nút ảo back to top này bằng cách thêm vào website của bạn một đoạn code ngắn.

code back to top — Tạo nút trở về đầu trang vô cùng đơn giản back to top

Hình trên chính là hình ảnh mô tả chiếc nút back to top vô cùng tiện ích mà các bạn sẽ làm sau đây.

Code tạo nút back to top

Đầu tiên bạn sao chép đoạn code bên dưới rồi dán vào code website của bạn, cứ cho nó nằm dưới thẻ </header> là được. Nếu bạn đang sử dụng WordPress, thì tìm tới file header.php trong thư mục theme mà bạn đang sử dụng rồi dán code dưới thẻ </header>.

&lt;button id="myBtn" title="Lên đầu trang"&gt;&lt;img src='&lt;?php echo get_template_directory_uri() ?&gt;/images/len.png' title='lên đầu trang' width='14px'/&gt;&lt;/button&gt;
&lt;script&gt;
window.onscroll = function() {scrollFunction()};
function scrollFunction() {

if (document.body.scrollTop &gt; 600 || document.documentElement.scrollTop &gt; 600) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}

document.getElementById('myBtn').addEventListener("click", function(){
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
&lt;/script&gt;

<button id="myBtn" title="Lên đầu trang"><img src='<?php echo get_template_directory_uri() ?>/images/len.png' title='lên đầu trang' width='14px'/></button>

window.onscroll = function() {scrollFunction()};

function scrollFunction() {

if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {

document.getElementById("myBtn").style.display = "block";

} else {

document.getElementById("myBtn").style.display = "none";

}

document.getElementById('myBtn').addEventListener("click", function(){

document.body.scrollTop = 0;

document.documentElement.scrollTop = 0;

});

</script>

…/images/len.png’ bạn thay thế đường dẫn hình ảnh biểu tượng nút lên của bạn.

Thêm đoạn css sau vào file style.css. ngoài ra bạn củng có thể cho đoạn css này vào thẻ <style> cho css vào đây </style> rồi đặt nó nằm dưới đoạn code ở trên.

/* Mui ten lên dau trang */
#myBtn {
display: none;
position: fixed;
bottom: 60px;
right: 10px;
z-index: 99;
border: none;
outline: none;
background-color: #fff;
border: 2px solid #ccc;
color: white;
cursor: pointer;
border-radius: 30px;
opacity: 0.7;
}

#myBtn:hover {
background-color: #f1f1f1;
}

/* Mui ten lên dau trang */

#myBtn {

display: none;

position: fixed;

bottom: 60px;

right: 10px;

z-index: 99;

border: none;

outline: none;

background-color: #fff;

border: 2px solid #ccc;

color: white;

cursor: pointer;

border-radius: 30px;

opacity: 0.7;

}

#myBtn:hover {

background-color: #f1f1f1;

}

bottom: 60px; bạn có thể sửa lại thông số khoảng cách chiếc nút từ dưới lên là bao nhiêu px;
right: 10px; Khoảng cách từ mép phải ra là bao nhiêu px;

Sau khi làm xong các bước trên, lưu lại hoàn thành, bây giờ hãy mở trang web của bạn lên để xem kết quả nhé.
Chúc các bạn thành công!

0/5 (0 Reviews)