Cách làm nút back to top cho app năm 2024
|
Hướng dẫn tạo nút Backtop – Click vào quay lên đầu trang. Với hướng dẫn này bạn có thể cho vào khi thiet ke web ban hang của bạn. Hướng dẫn tạo nút Back top – Click vào quay lên đầu trang. Với hướng dẫn này bạn có thể cho vào khi thiet ke web ban hang của bạn. Xem thêm:
Đây là 1 module khá đơn giản, nên các bạn chỉ cần thực hiện theo hướng dẫn là sẽ tạo được ngay nhé. Bước 1: Bạn cần có đoạn mã code để tạo nút: – Để các bạn theo dõi thuận tiện hơn, chúng ta sẽ chia module thành 2 phần: Phần 1: Đoạn mã Java tạo nút Phần 2: Đoạn mã Css định dạng cho nút Bước 2: Up ảnh backroud, lưu ý kích thước ảnh background phải bằng hoặc nhỏ hơn 1 chút so với kích thước của nút nhé. – Vào Quản lý ảnh >> Up ảnh background lên >> Sau đó chuột phải vào hình ảnh, chọn XEM >> Chọn sao chép URL của hình ảnh và paste vào đường dẫn ảnh trong đoạn mã. Bước 3: Thêm mới Module Text/HTML >> Copy toàn bộ đoạn mã Java và CSS trên và paste vào module. Sau đó chọn Cập nhật hoặc Lưu. (Các thông số chỉnh sửa thông thường có ghi chú ở đoạn mã code, các bạn theo dõi và chỉnh sửa lại cho phù hợp với site của mình) Bài viết này hướng dẫn các bạn tạo nút 'Lên đầu trang' hay còn gọi là Back to Top hay Scroll to Top. Mục đích giúp người duyệt web có thể di chuyển nhanh về đầu trang web. Chức năng chính của thủ thuật này chính là tạo ra một nút mũi tên lên, nằm ở góc dưới bên phải màn hình. Mục đích giúp người duyệt web di chuyển nhanh về đầu trang. Ví dụ như trang ngoisao.net các bạn có thể xem ở hình sau: Hôm nay tôi xin hướng dẫn các bạn làm một nút giống y như thế. Có nhiều cách để thực hiện điều này, nhưng ở đây chúng ta làm với Jquery và CSS để tạo hiệu ứng chạy mượt mà (có cảm giác như có đang chạy lên chứ không phải nhảy về đầu trang). Đầu tiên bạn sao chép đoạn code bên dưới rồi dán vào code website của bạn, cứ cho nó nằm dưới thẻ là được. Nếu bạn đang sử dụng WordPress, thì tìm tới file header.php trong thư mục theme mà bạn đang sử dụng rồi dán code dưới thẻ . |
