Khi bạn lướt web, đôi khi bạn đọc phải một bài viết rất là dài. Lúc đọc xong bạn lại phải scroll chuột để quay lại đầu trang web để chuyển sang tin khác. Việc làm này tuy không tốn nhiều thời gian nhưng sẽ khiến chúng ta cảm thấy khó chịu khi phải lặp đi lặp lại chuyện đó nhiều lần. Vậy thì hôm nay mình xin hướng dẫn các bạn cách tạo nút Back To Top cho website của bạn một cách đơn giản bằng Jquery.

Mình không dài dòng nữa, mình xin vào hướng dẫn luôn.

Đầu tiên bạn cần thêm thư viện Jquery vào website. Copy đoạn code sau thả vào thẻ <head>:

Tiếp theo, bạn thêm thư viện icon fontawesome này vào cho mình vì chúng ta sẽ dùng đến nó. Copy và dán vào thẻ <head>:

Bây giờ, chúng ta cùng vào những giai đoạn chính để tạo ra nút Back To Top. Đầu tiên là chúng ta tạo layout và style cho nút Back To Top.

Tạo giao diện (stylesheet) cho cái nút đó:

Cuối cùng là viết hàm Jquery cho cái nút đó hoạt động:

Bạn nên đặt đoạn code jquery này ở đầu trang <head> hoặc cuối trang dưới <footer>. Tuy nhiên mình khuyên là nên đặt ở đầu để khi load trang nó không bị hiển thị nút Back To Top lên trước mặc dù khi mới load ta chưa hề scroll chuột.

Đây là thành quả. Chúc các bạn thành công.

2
Để lại bình luận

avatar
1 Bình luận chủ đề
1 Trả lời chủ đề
0 Theo dõi
 
Bình luận được thả cảm xúc nhiều nhất
Chủ đề bình luận nóng nhất
2 Tác giả bình luận
phanthanhThái Nguyên Web Tác giả bình luận gần đây
  Đăng ký theo dõi  
Mới nhất Cũ nhất Voted nhiều nhất
Thông báo về
Thái Nguyên Web
Khách

Bài viết rất hay, nhiều khi cần dùng mà tìm không thấy, thank ad