HOTLINE: + (123) 1800-567-8990
Mon - Fri: 9:00 - 19:00
  • English
  • Việt Nam
Blog

Tạo nút trở về đầu trang (back to top) cho trang web

Chào các bạn.
Có 1 số website thường có nội dung khá dài, khi đọc hết nội dung, để di chuyển lên đầu trang phải lăn chuột nhiều lần, rất khó chịu.
Để khắc phục điều này, hôm nay mình sẽ hướng dẫn các bạn tạo nút di chuyển về đầu trang (back to top).

1. Nút “back to top” đơn giản

Bạn chèn code này vào nơi muốn đặt nút về đầu trang.

Cách này nhanh, đơn giản, nhưng khi bấm, nó nhảy về đầu trang ngay lập tức. Hiệu ứng không đẹp lắm.

2. Nút “back to top” với jquery

Để cho nút có hiệu ứng mượt mà hơn, đầu tiên, thêm 1 id vào nút như sau :

Tiếp theo, thêm vào trang html 1 đoạn jquery như sau :

Lưu ý, nếu đã có thư viện jquery rồi thì xóa dòng jquery 2.1.3 của mình đi nhé.

Nâng cao hơn xíu nữa, giờ sẽ cho nút đó mặc định ẩn đi, khi nào cuộn trang xuống thì mới hiển thị lên.
Ta sửa đoạn jquery lúc nãy thành :

Ok hoàn thành. Các bạn chỉnh css cho nút trông bắt mắt hơn nhé.
Nếu thấy bài viết có ích, hãy chia sẻ ủng hộ mình nhé. Xin cảm ơn.

Leave a comment