Tạo nút trở về đầu trang vô cùng đơn giản back to top
  1. Home
  2. Phần mềm
  3. Tạo nút trở về đầu trang vô cùng đơn giản back to top
Nguyễn Văn Luyến 4 năm trước

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

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ẻ

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ẻ

.

 

…/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ẻ

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;
}

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!

Nguồn: //caodem.com/tao-nut-tro-ve-dau-trang-vo-cung-don-gian-back-to-top/

1 lượt xem | 0 bình luận
Tác giả vẫn chưa cập nhật trạng thái

Avatar

Bình luận gần đây

//rongcon.net
Nguyễn Văn Luyến 3 tuần trước
Ưng dụng này rất hay cho người hay thực hiện các biểu mâu, thư mời,...
//rongcon.net
Nguyễn Văn Luyến 1 tháng trước
Chuẩn bị lại lên giá
//rongcon.net
Chuyển Đổi Số 6 tháng trước
Có trang nguồn mình tải á, bạn qua trang đó xem thử. Mình cài được bình thường á
//rongcon.net
Chuyển Đổi Số 6 tháng trước
Mỉnh cũng thấy cái gì hay hay lưu lại trên trang cá nhân khi nào cần lấy ra dùng thôi à. Cảm ơn bạn nhiều!
//rongcon.net
quang tuấn 6 tháng trước
ok cám ơn add
//rongcon.net
Đàm kiên 10 tháng trước
sao không thấy hướng dẫn khắc phục lỗi the macro vậy
//rongcon.net
Đàm kiên 10 tháng trước
file tải về chỉ có 3 file hướng dẫn chứ không có file cài đặt nhé
//rongcon.net
Nguyễn Văn Luyến 1 năm trước
Bài viết hay
ZaloMessengerEmail
Đồng ý Cookie
Trang web này sử dụng Cookie để nâng cao trải nghiệm duyệt web của bạn và cung cấp các đề xuất được cá nhân hóa. Bằng cách chấp nhận để sử dụng trang web của chúng tôi