Trang chủ
Nếu bạn cảm thấy nút back to top (lên đầu trang) mặc định của theme Flatsome quá đơn giản và không tạo được điểm nhấn cho giao diện, bạn hoàn toàn có thể tự tạo một nút mới nổi bật hơn. Một trong những kiểu được người dùng ưa chuộng hiện nay là nút back to top có hiệu ứng progress scroll – tức là khi bạn cuộn trang đến đâu, vòng tròn viền màu sẽ chạy theo đến đó. Kiểu hiệu ứng này không chỉ giúp UX mượt mà hơn, mà còn tạo dấu ấn thẩm mỹ rõ rệt, giúp website trở nên hiện đại và chuyên nghiệp hơn. Trong hướng dẫn này, bạn có thể áp dụng để thay thế hoàn toàn nút mặc định của Flatsome, hoặc giữ song song nếu muốn thử nhiều kiểu giao diện khác nhau.
Hướng dẫn tạo nút back to top mới trong Flatsome
Để tạo nút back to top (lên đầu trang) với hiệu ứng viền chạy theo độ cuộn trang và thay thế nút mặc định của Flatsome, bạn thực hiện lần lượt các bước sau:
Bước 1: Truy cập file functions.php của Child Theme
Vào Giao diện (Appearance) → Theme File Editor (Chỉnh sửa giao diện), sau đó ở cột bên phải, chọn đúng Child theme bạn đang dùng và mở file functions.php để chỉnh sửa.
Bước 2: Thêm đoạn code tạo nút back to top
Kéo xuống cuối file functions.php và dán toàn bộ đoạn code bên dưới. Sau khi lưu lại, bạn chỉ cần ra lại website và tải lại trang là sẽ thấy nút back to top mới xuất hiện và thay thế hoàn toàn nút mặc định của Flatsome.
// Tắt nút Back to top mặc định của Flatsome
add_action( 'init', 'mwp_remove_flatsome_backtotop' );
function mwp_remove_flatsome_backtotop() {
remove_action( 'flatsome_footer', 'flatsome_go_to_top' );
}
// Thêm nút Back to top mới dạng vòng progress + %
add_action( 'wp_footer', 'mwp_render_scroll_ring' );
function mwp_render_scroll_ring() {
?>
<div class="scroll-ring">
<div class="scroll-ring__inner">
<svg class="scroll-ring__svg" viewBox="0 0 100 100">
<!-- Track nền -->
<circle class="scroll-ring__track" cx="50" cy="50" r="45"></circle>
<!-- Vòng progress chạy -->
<circle class="scroll-ring__progress" cx="50" cy="50" r="45"></circle>
</svg>
<!-- Icon lên đầu trang -->
<span class="scroll-ring__icon">
<i class="icon-angle-up" aria-hidden="true"></i>
</span>
<!-- Phần trăm để người dùng thấy rõ độ chạy -->
<span class="scroll-ring__percent">0%</span>
</div>
</div>
<style>
/* ===== CUSTOM SCROLL RING (BACK TO TOP) ===== */
.scroll-ring {
position: fixed;
right: 26px;
bottom: 26px;
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateY(18px) scale(0.9);
transition: all 220ms ease;
cursor: pointer;
}
.scroll-ring.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.scroll-ring__inner {
position: relative;
height: 56px;
width: 56px;
border-radius: 50%;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: radial-gradient(circle at 30% 20%,
rgba(255,255,255,0.6),
rgba(255,255,255,0.15),
rgba(0,0,0,0)
);
box-shadow:
0 18px 45px rgba(0,0,0,0.25),
0 0 0 1px rgba(255,255,255,0.7);
}
/* SVG vòng tròn */
.scroll-ring__svg {
position: absolute;
inset: 0;
transform: rotate(-90deg); /* bắt đầu từ trên đỉnh */
}
.scroll-ring__track {
fill: none;
stroke: rgba(255,255,255,0.3);
stroke-width: 5;
}
.scroll-ring__progress {
fill: none;
stroke: var(--primary-color, #2e3c93);
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 0 999;
stroke-dashoffset: 0;
transition: stroke-dashoffset 60ms linear;
}
/* Icon mũi tên ở giữa */
.scroll-ring__icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.scroll-ring__icon i {
font-size: 20px;
color: #fff;
height: 34px;
width: 34px;
line-height: 34px;
text-align: center;
border-radius: 50%;
background: radial-gradient(circle at 30% 20%,
var(--primary-color, #2e3c93),
#111b4a
);
box-shadow:
0 8px 18px rgba(0,0,0,0.35),
0 0 0 1px rgba(255,255,255,0.5);
transition: all 200ms ease;
}
/* Số phần trăm nhỏ phía dưới icon – tạo cảm giác đang “chạy” */
.scroll-ring__percent {
position: absolute;
left: 50%;
bottom: 2px;
transform: translateX(-50%);
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
z-index: 3;
pointer-events: none;
}
/* Hover: icon nổi & xoay nhẹ */
.scroll-ring:hover .scroll-ring__icon i {
transform: translateY(-1px) scale(1.05);
box-shadow:
0 12px 24px rgba(0,0,0,0.45),
0 0 0 1px rgba(255,255,255,0.8);
}
/* Mobile: thu nhỏ lại */
@media (max-width: 767px) {
.scroll-ring {
right: 16px;
bottom: 16px;
}
.scroll-ring__inner {
height: 50px;
width: 50px;
}
.scroll-ring__icon i {
height: 30px;
width: 30px;
line-height: 30px;
font-size: 18px;
}
.scroll-ring__percent {
font-size: 10px;
}
}
</style>
<script>
jQuery(function($){
"use strict";
var $ring = $('.scroll-ring');
var $percentEl = $('.scroll-ring__percent');
var progressEl = document.querySelector('.scroll-ring__progress');
if (!progressEl) return;
// Tính chu vi vòng tròn
var radius = progressEl.r.baseVal.value;
var circumference = 2 * Math.PI * radius;
progressEl.style.strokeDasharray = circumference + ' ' + circumference;
progressEl.style.strokeDashoffset = circumference;
function setProgress(percent) {
if (percent < 0) percent = 0;
if (percent > 100) percent = 100;
var offset = circumference - (percent / 100) * circumference;
progressEl.style.strokeDashoffset = offset;
// Update số %
if ($percentEl.length) {
$percentEl.text(Math.round(percent) + '%');
}
}
function onScroll() {
var scroll = $(window).scrollTop();
var height = $(document).height() - $(window).height();
var percent = height > 0 ? (scroll / height) * 100 : 0;
setProgress(percent);
var offsetShow = 80; // cuộn hơn 80px thì hiện
if (scroll > offsetShow) {
$ring.addClass('is-visible');
} else {
$ring.removeClass('is-visible');
}
}
// Lần đầu & khi cuộn
onScroll();
$(window).on('scroll', onScroll);
// Click → scroll lên đầu
$ring.on('click', function(e){
e.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 550);
});
});
</script>
<?php
}
