Hướng dẫn này sẽ giúp các bạn thêm nút back-to-top quay lại đầu trang một cách cơ bản nhất.
Sau khi hoàn thành, nút quay lại đầu trang sẽ luôn xuất hiện ở góc dưới bên trái, và đổi màu khi khách hàng click chuột vào.
Đầu tiên, các bạn thêm đoạn code này vào
Nếu các bạn cần nút gọi luôn hiển thị, bạn có thể dùng thay thế bằng một code khác được chúng tôi đăng tải ở cuối bài viết.
Đầu tiên các bạn thêm đoạn code sau vào VietMoz Theme Options > Styling options:
#back-to-top {
background: url(http://vietmoz.com/wp-content/themes/vietmoz/images/back-to-top.png);
position: fixed;
bottom: 25px;
left: 21px;
cursor: pointer;
transition: all .4s;
-webkit-transition: all .4s;
padding: 20px;
}
#back-to-top:hover {
background: url(http://vietmoz.com/wp-content/themes/vietmoz/images/back-to-top-hover.png);
}
Lưu ý, 2 đường dẫn trong đoạn code trên là đường dẫn hình về ảnh mũi tên back-to-top hiện có trên trang vietmoz.com . Nếu bạn muốn đổi màu của 2 hình ảnh mũi tên này, bạn có thể thực hiện theo 3 bước sau:
- Download 2 hình ảnh này về và thay đổi màu, lưu ý, bạn nên sử dụng photoshop để đổi màu để tránh thay đổi nền ảnh, lưu ảnh dưới dạng PNG để có thể giữ được nền ảnh trống.
- Upload ảnh lên web của mình.
- Mở mục Phương tiện > Thư viện, chọn ảnh và click vào view, chuột phải vào hình ảnh vừa up lên và chọn Open image in new tab (mở ảnh trong 1 tab mới)
- Thay đường dẫn của ảnh vừa up lên vào đoạn code trên. >> Hoàn tất.
Sau đó, bạn thêm mã sau vào mục Cài đặt chung > Custom code before </body>:
<a href="#"><span id="back-to-top"></span></a>
Hoàn tất cài đặt. Hướng dẫn thêm nút quay lại đầu trang bằng javascript sẽ được cập nhật trong thời gian tới.