Hướng dẫn tạo nút cuộn về đầu trang đơn giản với jQuery

Chắc hẳn các bạn đã từng tiếp xúc với nhiều trang web dài và khi xem tới cuối trang bạn cảm thấy mệt mỏi với việc phải kéo lại lên trên đầu trang . Để giải quyết vấn đề này ta sẽ tạo một nút Back to top có chức năng giúp khách truy cập có thể trở về đầu trang 1 cách nhanh chóng.

Hôm nay trong bài này mình muốn hướng dẫn các bạn xây dựng tính năng này dựa trên nền jQuery. Miêu tả là khi ở đầu trang thì ta không thấy nút Back to top nhưng khi kéo xuống 1 đoạn nút bấm sẽ xuất hiện và kích vào nó thì sẽ lên trên đầu trang đồng thời cũng mất đi nút Back to top này.

Bước 1: Chèn nút Back to top vào trước thẻ đóng body

Các bạn có thể dùng image, hay là icon nào đấy cũng được tùy vào sở thích của mỗi người. Ví dụ này mình dùng FA Icon.

Bước 2: Thêm 1 chút css cho đẹp hơn đồng thời fix vị trí cố định cho nút Back to top

Bước 3: Sử dụng jQuery để cuộn trang

Ở đây mình sử dụng sự kiện Click và hiệu ứng animate khi người dùng ấn vào nút Back to top thì nó sẽ thực hiện hành động chuyển về đầu trang với tốc độ là 1000. Nếu trang của các bạn thiết kế dài thì các bạn hãy thiết lập tốc độ sao cho phù hợp.

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

0 0 vote
Article Rating
Nhận thông báo qua email
Nhận thông báo cho
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x