Tạo nút lên đầu trang trong html

Khi viết bài cho website, mọi người thường cố gắng viết cho thật dài để tăng điểm SEO. Cho nên khi bạn muốn trở về đầu trang phải kéo chuột khá lâu. Nếu trên di động thì bạn biết phải vuốt mệt cỡ nào rồi đó. Do đó, thiết kế nút trở về đầu trang hay Back to top là một phần cơ bản của hầu hết website. Nó giúp cho người dùng dễ dàng trở về phần đầu của trang chỉ bằng một click. Mà không phải kéo thanh trượt hoặc vuốt màn hình đến mỏi tay.

Trong bài viết này mình sẽ chia sẻ với các bạn 2 cách tạo back to top. Một cách siêu đơn giản không có hiệu ứng và một cách có hiệu ứng trượt, có thể tùy chỉnh theo ý thích. Các cách này chỉ sử dụng html/css hoặc javascript nên có thể sử dụng cho mọi loại mã nguồn: blogspot, wordpress, xenforo,…

Cách tạo back to top đơn giản, không hiệu ứng

Bạn chỉ cần dán đoạn mã ngắn ngũn này vào phần cuối của trang web, thường là phần footer. WordPress thì bạn dán vào file footer.php của theme đang sử dụng.

ˆ

Thực ra đây chỉ là một liên kết về đầu trang. Hoàn toàn không có hiệu ứng gì cả. Nó dành cho những ai thích sự đơn giản, giúp tối giản code, load trang nhanh. Bạn có thể “trang trí” sơ sơ cho nút này ví dụ:

ˆ

Các bạn chú ý ký tự ˆ; chính là dấu mũi tên lên ˆ. Bạn có thể google với từ khóa “Ký tự đặc biệt html” để xem thêm các ký tự khác. Hoặc bạn cũng có thể thay nó bằng chữ “Về đầu trang” chẳng hạn.

Để chuyên nghiệp hơn, tạo cảm giác đẹp mắt và thân thiện cho người dùng hơn, chúng ta nên tạo nút back to top với hiệu ứng trượt. Cách làm như sau.
Các bạn copy đoạn code sau dán vào phần chân trang, giữa thẻ của file footer.php
Phần import các thư viện icon, Jquery nếu đã có thì không cần nữa nhé. Đây là cách liên kết với thư viện có sẵn của các dịch vụ. Nếu muốn chúng ta cũng có thể tích hợp trực tiếp vào website nếu không muốn lệ thuộc vào các trang dịch vụ này.

// kéo xuống khoảng cách 500px thì xuất hiện nút Top-up
var offset = 500;
// thời gian di trượt 0.75s [ 1000 = 1s ]
var duration = 750;
$[function[]{
$[window].scroll[function [] {
if [$[this].scrollTop[] > offset]
$['#top-up'].fadeIn[duration];else
$['#top-up'].fadeOut[duration];
}];
$['#top-up'].click[function [] {
$['body,html'].animate[{scrollTop: 0}, duration];
}];
}];

Mở file style.css của theme đang sử dụng, dán đoạn dưới vào.

#top-up {
font-size: 3rem;
cursor: pointer;
position: fixed;
z-index: 9999;
color:#004993;
bottom: 20px;
right: 15px;
display: none;
}
#top-up:hover {
color: #333
}

Chỉ vậy thôi là các bạn đã có nút back to top như của canxem.com

Tuy nhiên, nếu muốn “tạo sự khác biệt” cho website bạn cần chú ý một số chỗ để có thể tùy chỉnh theo ý thích:

• var offset = 500: Kéo xuống 500px thì xuất hiện nút back to top.
• var duration = 750: thời gian trượt 0.75 giây, 1000 = 1 giây
• Và một phần khá quan trọng để các bạn có thể thay đổi hình ảnh tùy thích là phần . Đó là biểu tượng mình sẽ chọn để làm nút back to top.
• Phần CSS là dành cho bạn chế biến, mọi thứ như size, màu sắc, vị trí,…

Các bạn truy cập trang này để chọn biểu tượng mình thích và dán class của nó thay thế. //fontawesome.com/v5.15/icons

Một số ví dụ: