Cách Thêm Nút Cuộn Lên Đầu Trang Trong Flatsome

5/5 - (1 bình chọn)

Thêm nút “Cuộn lên đầu trang” cho website Flatsome giúp nâng cao trải nghiệm người dùng rõ rệt. Một nút nhỏ – dễ thấy và dễ bấm sẽ giúp khách truy cập nhanh chóng trở về đầu trang. Tính năng này đặc biệt hữu ích với các trang có nội dung dài. Bài viết dưới đây hướng dẫn bạn các cách thêm nút cuộn lên đầu trang trong WordPress, từ đơn giản đến nâng cao.

Phương pháp 1: Sử dụng plugin

Phương pháp này là cách thêm nút cuộn lên đầu trang WordPress đơn giản nhất. Phương pháp này đặc biệt phù hợp với người mới bắt đầu, không cần biết lập trình vẫn có thể thực hiện dễ dàng. Hiện nay, có rất nhiều plugin miễn phí và trả phí hỗ trợ tính năng này. Sau khi cài đặt và kích hoạt, bạn chỉ cần tùy chỉnh vị trí, màu sắc và hiệu ứng hiển thị. Cách làm này vừa tiết kiệm thời gian, vừa đảm bảo tính thẩm mỹ và tiện lợi cho người dùng.

Ưu điểm:

Dễ dàng cài đặt và sử dụng.
Không cần kiến thức lập trình.

Nhược điểm:

Có thể làm chậm website nếu plugin chưa được tối ưu.
Phụ thuộc vào plugin, dễ gặp lỗi nếu plugin ngừng hoạt động hoặc xung đột với plugin khác.

Gợi ý: Bạn có thể tham khảo các plugin phổ biến như “Back to Top Button” hoặc “Scroll to Top” trên kho plugin WordPress. Trước khi cài đặt, hãy đọc kỹ mô tả và đánh giá người dùng để chọn được plugin phù hợp nhất cho website của bạn.

Phương pháp 2: Sử dụng chức năng mặc định của Flatsome

Theme Flatsome đã tích hợp sẵn nút “Back to top”, bạn có thể bật tính năng này dễ dàng mà không cần cài plugin. Để thực hiện, hãy vào Giao diện -> Tùy chỉnh -> Footer, sau đó tích chọn mục “Back to top button”. Tiếp theo, bạn cần chèn một ID vào đoạn HTML đầu trang để nút cuộn hoạt động hiệu quả và mượt mà hơn.

Các bước chi tiết:

Truy cập tùy chỉnh giao diện: Từ trang quản trị WordPress, vào Giao diện -> Tùy chỉnh.
Chọn mục Footer: Trong trình tùy chỉnh, tìm và chọn Footer.
Bật nút Back to top: Tích vào ô Back to top button để kích hoạt nút cuộn lên đầu trang.

Lưu thay đổi rồi kiểm tra website để đảm bảo nút “Back to top” hiển thị và hoạt động đúng.

Phương pháp 3: Tạo mới nút quay lên đầu trang không cần plugin

Nếu bạn thấy nút “Back to top” quá đơn điệu, hãy tạo riêng một nút tùy chỉnh với hiệu ứng viền màu chạy theo tiến độ cuộn trang.

Bước 1: Truy cập tới file functions.php của Child theme

Truy cập menu Giao diện -> Theme File Editor (Chỉnh sửa Giao diện) -> chọn file functions.php để sửa.

Bước 2: Thêm đoạn code này vào cuối file functions.php

add_action( 'init', 'fn_remove_backtotop');
function fn_remove_backtotop() {
remove_action( 'flatsome_footer', 'flatsome_go_to_top' );
}
add_action('wp_footer','fn_backtotop');
function fn_backtotop(){
?>
<div class="progress-wrap">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
</svg>
</div>
<style>
.progress-wrap {
position: fixed;
right: 30px;
bottom: 30px;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
border-radius: 50px;
z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.progress-wrap::after {
position: absolute;
font-family: "fl-icons" !important;
content: "";
text-align: center;
font-size: 24px;
color: #fff;
left: 0;
right: 0;
margin: auto;
background-color: var(--primary-color);
border-radius: 99px;
top: 50%;
transform: translateY(-50%);
height: 38px;
width: 38px;
line-height: 35px;
cursor: pointer;
display: block;
z-index: 1;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.progress-wrap:hover::after {
background-color: #333;
}
.progress-wrap::before {
position: absolute;
font-family: "fl-icons" !important;
content: "";
text-align: center;
line-height: 46px;
font-size: 24px;
opacity: 0;
background: var(--primary-color); /* --- Pijl hover kleur --- */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
left: 0;
top: 0;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
z-index: 2;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.progress-wrap:hover::before {
opacity: 1;
}
.progress-wrap svg path {
fill: none;
}
.progress-wrap svg.progress-circle path {
stroke: var(--primary-color); /* --- Lijn progres kleur --- */
stroke-width: 4;
box-sizing:border-box;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
</style>
<script>
jQuery(document).ready(function(){"use strict";

var progressPath = document.querySelector('.progress-wrap path');
var pathLength = progressPath.getTotalLength();
progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
progressPath.style.strokeDashoffset = pathLength;
progressPath.getBoundingClientRect();
progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
var updateProgress = function () {
var scroll = jQuery(window).scrollTop();
var height = jQuery(document).height() - jQuery(window).height();
var progress = pathLength - (scroll * pathLength / height);
progressPath.style.strokeDashoffset = progress;
}
updateProgress();
jQuery(window).scroll(updateProgress);
var offset = 50;
var duration = 550;
jQuery(window).on('scroll', function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.progress-wrap').addClass('active-progress');
} else {
jQuery('.progress-wrap').removeClass('active-progress');
}
});
jQuery('.progress-wrap').on('click', function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<?php
}

Xem ngay video hướng dẫn chi tiết tại: