Cách tạo nút back top cho web hay tên gọi khác là back to top cho web là kỹ thuật chèn một nút back top cho website để người dùng nhanh chóng trở lại đầu trang. Tuy là nhỏ nhặt, nhưng về mặt trãi nghiệm người dùng lại là một điểm cộng vô hình nhưng hữu hạng.
Có nhiều phương pháp tạo nút back top cho website cho nhiều mã nguồn khác trong dịch vụ thiết kế web giá rẻ như wordpress ( chiếm 40% lượng web đang có trên thế giới – và được google khuyến khích dùng ), xenforo, hay các dạng web tự code từ nhà phát triển.
Code nút back top cho website để làm gì
Là một dạng button ( nút ) để người sử dụng web bấm vào và nhanh chóng trở lại đầu trang web. Nút back top cho website sẽ xuất hiện ngay lập tức khi người sử dụng web cuộn trang xuống phía dưới của website. Và chỉ cần bấm vào, nút backtop sẽ đưa về đầu trang.
Nút back top cho website hiển thị trên mọi thiết kế website quảng ngãi của chúng tôi để phục vụ trãi nghiệm tốt hơn. Đặc biệt bạng nút back top này được tạo ra từ code html + css + java cực đơn giản và nhẹ nhàng không ảnh hướng tới tốc độ load web cũng như điểm SEO trên google. Thương thích trên máy tính, smartphone, máy tính bảng.
Cách tạo nút back top cho website
Cách chèn nút back top cho web như sau: code lần lượt các đoạn mã được chia sẽ bên dưới và cho vào bên trong thẻ <head></head> của web. Nếu bạn sử dụng wordpress có thể chèn vào file header.php. Dùng xenforo có tìm Templates > PAGE_CONTAINER và chèn code vào. Tất cả phải bên trong <head></head>.
<!-- bat dau | nut back top -->
<a href="#" id="backTop"><span>Top</span></a> <style>
#backTop {
position: fixed;
bottom: 60px;
right: 2px;
z-index: 9999;
width: 39px;
height: 39px;
text-align: center;
text-transform: uppercase;
line-height: 39px;
background: #f5f5f5;
color: #444;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
transition: opacity 0.2s ease-out;
opacity: 0;
border: 1px solid #797979;
border-radius: 10px;
}
#backTop span {
color: #000;
display: block;
font-weight: 900;
}
#backTop:hover {
background: #e9ebec;
}
#backTop.show {
opacity: 1;
}
@media (max-width: 500px) {
#backTop.show {
display: block;
}
}
</style>
<script>
(function($) {
"use strict"
$(function() {
if ($('#backTop').length) {
var scrollTrigger = 100, // px
backToTop = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#backTop').addClass('show');
} else {
$('#backTop').removeClass('show');
}
};
backToTop();
$(window).on('scroll', function() {
backToTop();
});
$('#backTop').on('click', function(e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
}
});
})(jQuery);
</script>
<!-- kết thúc | nut back top -->Ưu điểm và nhược điểm nút backtop
Cái nào trong thế giới này cũng có ưu điểm và nhược điểm nên mình xin phân tích rõ để mọi người dễ dàng nắm bắt và fix lỗi nút back top cho website khi sử dụng. Tránh trường hợp sau một thời gian mất nút backtop lại không biết lý do xảy ra lỗi mà nhứt cái đầu.
Ưu điểm: Đây là 1 đoạn code backtop đơn giản nên gần như tương thích với mọi thể loại lập trình thiết kế website đang có trên thị trường Việt Nam cũng như thế giới. Từ sự đơn giản đó nên nó dễ cài đặt và không làm hao tốn tài nguyên lưu trữ cũng như ảnh hưởng tới tốc độ load website – vốn là 1 trong những tiêu chí vàng cho 1 trang web.
Nhược điểm: Vì là code html + css + java thủ công, nên KHI CAC BẠN UPDATE CODE SẼ BỊ MẤT kể cả wrodrpess khi update theme và xenforo. Nên khi update theme ( giao diện web ) bạ bắt buộc phỉ thêm code này lại từ đầu. Nên có vẻ khá mất thời gian và kho nhớ ( trong hàng đống code ) nếu bạn không làm nhiều sẽ dễ bị quên.
Nút backtop bằng plugin cho wordpress
Vì vậy nên để thuận tiện tạo nút back top cho web đặc biệt là wrodpress. Có nhiều plugin hỗ trợ làm việc đó cho cả những người không muốn đụng chạm đến code web. Và khi nâng cấp theme cũng không bị mất chức năng, miễn sao plugin còn cài đặt.
Có một plugin WPFront Scroll Top mà mình nghĩ các bạn thể thể dễ dạng tạo nút back top cho website với nhiều chức năng và icon sinh động. Nhưng như đã nói về tốc độ load website là tiêu chí vàng trong thiết kế web giá rẻ hay thiết kế web chuẩn seo. Thì khi cài càng nhiều plugin web sẽ càng bị ảnh hưởng ( nặng nề ).
Từ đó làm giảm tối ưu web, giảm tốc độ load web và tất nhiên ảnh hưởng đến quá trình seo website lên các bộ máy tìm kiếm như google, coccoc, ping,… Mà giảm seo thì tất nhiên không ai mong muốn. Chưa kể càng nhiều plugi thì càng dễ bị dính lổ hổng bảo mật khiến website của bạn gặp vấn đề.
Tổng kết lại bài viết
Vậy tổng kết lại là sự lựa chọn của bạn muốn thuận tiện hay chuẩn SEO. Trong trường hợp bạn thấy khó khăn trong việc thiết kế 1 trang web. Có thể tham khảo về giá thiết kế web bán hàng hay web công ty tại đơn vị chúng tôi để sở hữu cho mình website nhanh chóng và thiết kế chuẩn seo. Cảm ơn đã ghét thăm website này
