Mới nhất

Cách thêm nút back to top bằng Elementor

thêm nút back to top bằng elementor

Website của bạn đang build bằng Elementor và Theme không hỗ trợ sẵn nút back to top, bạn cũng không muốn cài thêm plugin chỉ để thêm một cái nút quay về đầu trang. Hãy sử dụng ngay Elementor để tạo một nút back to top rất nhanh và đơn giản nhé.

1. Thêm icon hoặc button vào trang chủ hoặc footer template

Cách dễ nhất là thêm một icon hoặc button vào footer template vì footer sẽ được hiện thị trên toàn bộ các bài viết, trang của website.

thêm "back to top"

Sau khi thêm icon thì tới phần chỉnh sửa nội dung của icon. Trong phần chỉnh sửa nội dung các bạn có thể thêm bất kì icon nào mình thích từ thư viện hoặc tự upload lên.

Cách thêm "back to top" bằng Elementor

Tiếp theo là chỉnh sửa style cho icon như màu sắc, kích thước…

them back to top 3

2. Thêm ID css cho icon và chỉnh sửa vị trí icon

Sau khi tùy biến giao diện nút back to top ta chuyển sang gán id và chỉnh sửa vị trí icon trong phần Advanced.

Ở Position ta chọn Fixed, Horizontal Orientation chọn Right nếu muốn chọn nút backtotop nằm bên phải, Offset mình để 3%. Vertical Orientation chọn Bottom và offset chọn 2,5%.

Và cuối cùng ở ô CSS ID nhập backtotop

them back to top 4

Các bạn nhớ tùy chỉnh vị trí cho cả giao diện mobile nữa nhé.

3. Thêm code để điều khiển nút back to top

Sau khi thêm nút back top top và chỉnh sửa giao diện cũng như vị trí cho nó, bước cuối cùng chúng ta thêm một đoạn mã Javascript và CSS để điều khiển nút này khi nào cần xuất hiện/mất đi và hiệu ứng khi xuấy hiện/mất đi

Để thêm đoạn mã javascript và CSS này chúng ta thêm widget html vào bất kì đâu trong footer template.

them back to top 5

Các bạn copy toàn bộ đoạn mã sau vào trong widget HTML nhé.

				
					<script type="rocketlazyloadscript">
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 500) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function(){
$("html, body").animate({ scrollTop: 0 }, 'slow');
return false;
});
}); });
</script>
<style>
#backtotop{
cursor: pointer;
display: none;
z-index: 999;
}
#backtotop .elementor-align-icon-left {
margin-right: 0;
}
</style>

				
			

Sau khi hoàn thành các bước trên, nhớ update Footer template và Reload lại trang web của bạn để kiểm tra nhé. Các bạn cũng có thể tùy biến đoạn mã điều khiển trên theo ý thích miễn là cái nut back to top vẫn hoạt động là được 😀

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

5 2 votes
Đánh giá bài viết
Đăng kí
Thông báo khi
guest

1 Comment
cũ nhất
mới nhất
Inline Feedbacks
View all comments
nam
nam
Khách
23/05/2022 10:14 am

rất đơn giản và dễ hiểu