Khái quát
Scroll Top là thuật ngử dùng để tạo ra hiệu ứng quay lên đầu trang web chỉ với một click chuột, thông thường chức năng này sử dụng Javascript hoặc Jquery để thực hiện, tuy nhiên trên thực tế ta có thể dể dàng tạo ra chức năng lên đầu trang chỉ với HTML và CSS.
Ưu điểm của việc tạo chức năng lên đầu trang chỉ sử dụng HTML và CSS
Ngắn gọn hơn vì không cần viết thêm Javscript, mà số dòng code HTML và CSS cả hai cách đều tương đối bằng nhau.
Không phải sử lý tính toán nhiều vì đã lược bỏ công đoạn tính toán trong Javascript.
Tiến hành xây dựng Scroll Top sử dụng HTML và CSS
Ở HTML ở cuối file, hãy chèn một liên kết vào vị trí muốn tạo ra nút Scroll Top.
Theo mặc định bất cứ một liên kết nào có đường dẩn là một dấu thăng, khi người dùng nhấp chuột vào đều sẽ bị cuộn lên đầu trang.
Về cơ bản nó đã hoạt động rồi, tuy nhiên cần design lại để nó luôn nằm tại vị trí lề phải màn hình và tạo ra hiệu ứng cuộn lên đầu trang từ từ, các công đoạn này sẽ được thực hiện bằng CSS.
html{
scroll-behavior: smooth;
}
.totop{
position: fixed;
bottom: 10px;
right: 10px;
background-color: #FFBF00;
padding: 20px;
border-radius: 20px;
}
Với position fixed phần tử sẽ luôn được cố định trên cửa sổ trình duyệt cho dù có cuộn trang đi đâu.
Thuộc tính scroll-behavior sẽ quy định cách thức trang được cuộn lên, smooth là hiệu ứng cuộn trang lên từ từ.
Xem video hướng dẩn chi tiết
Kết luận
Vậy là chỉ một vài dòng code ngắn HTML và CSS ta hoàn toàn có thể tạo ra được một chức năng cuộn lên đầu trang Scroll Top đầy đủ hiệu ứng, không cần dùng đến Javascript hay Jquery, không cần tính toán quá nhiều. Mong rằng bài viết này sẽ có ích với bạn đọc. Hãy follow kênh Youtube Lùn Dev để liên tục cập nhật những video chia sẽ của mình nhé.