{"id":223,"date":"2025-11-19T14:54:45","date_gmt":"2025-11-19T14:54:45","guid":{"rendered":"https:\/\/muatheme247.com\/?p=223"},"modified":"2026-03-22T21:23:20","modified_gmt":"2026-03-22T14:23:20","slug":"cach-tuy-bien-nut-back-to-top-flatsome-voi-hieu-ung-dep","status":"publish","type":"post","link":"https:\/\/muatheme247.com\/en\/cach-tuy-bien-nut-back-to-top-flatsome-voi-hieu-ung-dep\/","title":{"rendered":"C\u00e1ch t\u00f9y bi\u1ebfn n\u00fat back to top flatsome v\u1edbi hi\u1ec7u \u1ee9ng \u0111\u1eb9p"},"content":{"rendered":"<p class=\"wp-block-paragraph\">N\u1ebfu b\u1ea1n c\u1ea3m th\u1ea5y n\u00fat back to top (l\u00ean \u0111\u1ea7u trang) m\u1eb7c \u0111\u1ecbnh c\u1ee7a theme Flatsome qu\u00e1 \u0111\u01a1n gi\u1ea3n v\u00e0 kh\u00f4ng t\u1ea1o \u0111\u01b0\u1ee3c \u0111i\u1ec3m nh\u1ea5n cho giao di\u1ec7n, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 t\u1ef1 t\u1ea1o m\u1ed9t n\u00fat m\u1edbi n\u1ed5i b\u1eadt h\u01a1n. M\u1ed9t trong nh\u1eefng ki\u1ec3u \u0111\u01b0\u1ee3c ng\u01b0\u1eddi d\u00f9ng \u01b0a chu\u1ed9ng hi\u1ec7n nay l\u00e0 n\u00fat back to top c\u00f3 <strong>hi\u1ec7u \u1ee9ng progress scroll<\/strong> \u2013 t\u1ee9c l\u00e0 khi b\u1ea1n cu\u1ed9n trang \u0111\u1ebfn \u0111\u00e2u, v\u00f2ng tr\u00f2n vi\u1ec1n m\u00e0u s\u1ebd ch\u1ea1y theo \u0111\u1ebfn \u0111\u00f3. Ki\u1ec3u hi\u1ec7u \u1ee9ng n\u00e0y kh\u00f4ng ch\u1ec9 gi\u00fap UX m\u01b0\u1ee3t m\u00e0 h\u01a1n, m\u00e0 c\u00f2n t\u1ea1o d\u1ea5u \u1ea5n th\u1ea9m m\u1ef9 r\u00f5 r\u1ec7t, gi\u00fap website tr\u1edf n\u00ean hi\u1ec7n \u0111\u1ea1i v\u00e0 chuy\u00ean nghi\u1ec7p h\u01a1n. Trong h\u01b0\u1edbng d\u1eabn n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng \u0111\u1ec3 thay th\u1ebf ho\u00e0n to\u00e0n n\u00fat m\u1eb7c \u0111\u1ecbnh c\u1ee7a Flatsome, ho\u1eb7c gi\u1eef song song n\u1ebfu mu\u1ed1n th\u1eed nhi\u1ec1u ki\u1ec3u giao di\u1ec7n kh\u00e1c nhau.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1174\" height=\"480\" src=\"https:\/\/muatheme247.com\/wp-content\/uploads\/2025\/11\/tuy-bien-back-to-top-flatsome.gif\" alt=\"\" class=\"wp-image-240\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>H\u01b0\u1edbng d\u1eabn t\u1ea1o n\u00fat back to top m\u1edbi trong Flatsome<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0110\u1ec3 t\u1ea1o n\u00fat back to top (l\u00ean \u0111\u1ea7u trang) v\u1edbi hi\u1ec7u \u1ee9ng vi\u1ec1n ch\u1ea1y theo \u0111\u1ed9 cu\u1ed9n trang v\u00e0 thay th\u1ebf n\u00fat m\u1eb7c \u0111\u1ecbnh c\u1ee7a Flatsome, b\u1ea1n th\u1ef1c hi\u1ec7n l\u1ea7n l\u01b0\u1ee3t c\u00e1c b\u01b0\u1edbc sau:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>B\u01b0\u1edbc 1: Truy c\u1eadp file <code>functions.php<\/code> c\u1ee7a Child Theme<\/strong><br>V\u00e0o <strong>Giao di\u1ec7n (Appearance) \u2192 Theme File Editor (Ch\u1ec9nh s\u1eeda giao di\u1ec7n)<\/strong>, sau \u0111\u00f3 \u1edf c\u1ed9t b\u00ean ph\u1ea3i, ch\u1ecdn \u0111\u00fang <strong>Child theme<\/strong> b\u1ea1n \u0111ang d\u00f9ng v\u00e0 m\u1edf file <strong><code>functions.php<\/code><\/strong> \u0111\u1ec3 ch\u1ec9nh s\u1eeda.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>B\u01b0\u1edbc 2: Th\u00eam \u0111o\u1ea1n code t\u1ea1o n\u00fat back to top<\/strong><br>K\u00e9o xu\u1ed1ng cu\u1ed1i file <strong><code>functions.php<\/code><\/strong> v\u00e0 d\u00e1n to\u00e0n b\u1ed9 \u0111o\u1ea1n code b\u00ean d\u01b0\u1edbi. Sau khi l\u01b0u l\u1ea1i, b\u1ea1n ch\u1ec9 c\u1ea7n ra l\u1ea1i website v\u00e0 t\u1ea3i l\u1ea1i trang l\u00e0 s\u1ebd th\u1ea5y n\u00fat back to top m\u1edbi xu\u1ea5t hi\u1ec7n v\u00e0 thay th\u1ebf ho\u00e0n to\u00e0n n\u00fat m\u1eb7c \u0111\u1ecbnh c\u1ee7a Flatsome.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ T\u1eaft n\u00fat Back to top m\u1eb7c \u0111\u1ecbnh c\u1ee7a Flatsome\nadd_action( 'init', 'mwp_remove_flatsome_backtotop' );\nfunction mwp_remove_flatsome_backtotop() {\n    remove_action( 'flatsome_footer', 'flatsome_go_to_top' );\n}\n\n\/\/ Th\u00eam n\u00fat Back to top m\u1edbi d\u1ea1ng v\u00f2ng progress + %\nadd_action( 'wp_footer', 'mwp_render_scroll_ring' );\nfunction mwp_render_scroll_ring() {\n    ?>\n    &lt;div class=\"scroll-ring\">\n      &lt;div class=\"scroll-ring__inner\">\n        &lt;svg class=\"scroll-ring__svg\" viewBox=\"0 0 100 100\">\n          &lt;!-- Track n\u1ec1n -->\n          &lt;circle class=\"scroll-ring__track\" cx=\"50\" cy=\"50\" r=\"45\">&lt;\/circle>\n          &lt;!-- V\u00f2ng progress ch\u1ea1y -->\n          &lt;circle class=\"scroll-ring__progress\" cx=\"50\" cy=\"50\" r=\"45\">&lt;\/circle>\n        &lt;\/svg>\n\n        &lt;!-- Icon l\u00ean \u0111\u1ea7u trang -->\n        &lt;span class=\"scroll-ring__icon\">\n          &lt;i class=\"icon-angle-up\" aria-hidden=\"true\">&lt;\/i>\n        &lt;\/span>\n\n        &lt;!-- Ph\u1ea7n tr\u0103m \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng th\u1ea5y r\u00f5 \u0111\u1ed9 ch\u1ea1y -->\n        &lt;span class=\"scroll-ring__percent\">0%&lt;\/span>\n      &lt;\/div>\n    &lt;\/div>\n\n    &lt;style>\n      \/* ===== CUSTOM SCROLL RING (BACK TO TOP) ===== *\/\n\n      .scroll-ring {\n        position: fixed;\n        right: 26px;\n        bottom: 26px;\n        z-index: 9999;\n        opacity: 0;\n        visibility: hidden;\n        transform: translateY(18px) scale(0.9);\n        transition: all 220ms ease;\n        cursor: pointer;\n      }\n\n      .scroll-ring.is-visible {\n        opacity: 1;\n        visibility: visible;\n        transform: translateY(0) scale(1);\n      }\n\n      .scroll-ring__inner {\n        position: relative;\n        height: 56px;\n        width: 56px;\n        border-radius: 50%;\n        backdrop-filter: blur(10px);\n        -webkit-backdrop-filter: blur(10px);\n        background: radial-gradient(circle at 30% 20%,\n          rgba(255,255,255,0.6),\n          rgba(255,255,255,0.15),\n          rgba(0,0,0,0)\n        );\n        box-shadow:\n          0 18px 45px rgba(0,0,0,0.25),\n          0 0 0 1px rgba(255,255,255,0.7);\n      }\n\n      \/* SVG v\u00f2ng tr\u00f2n *\/\n      .scroll-ring__svg {\n        position: absolute;\n        inset: 0;\n        transform: rotate(-90deg); \/* b\u1eaft \u0111\u1ea7u t\u1eeb tr\u00ean \u0111\u1ec9nh *\/\n      }\n\n      .scroll-ring__track {\n        fill: none;\n        stroke: rgba(255,255,255,0.3);\n        stroke-width: 5;\n      }\n\n      .scroll-ring__progress {\n        fill: none;\n        stroke: var(--primary-color, #2e3c93);\n        stroke-width: 5;\n        stroke-linecap: round;\n        stroke-dasharray: 0 999;\n        stroke-dashoffset: 0;\n        transition: stroke-dashoffset 60ms linear;\n      }\n\n      \/* Icon m\u0169i t\u00ean \u1edf gi\u1eefa *\/\n      .scroll-ring__icon {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 2;\n      }\n\n      .scroll-ring__icon i {\n        font-size: 20px;\n        color: #fff;\n        height: 34px;\n        width: 34px;\n        line-height: 34px;\n        text-align: center;\n        border-radius: 50%;\n        background: radial-gradient(circle at 30% 20%,\n          var(--primary-color, #2e3c93),\n          #111b4a\n        );\n        box-shadow:\n          0 8px 18px rgba(0,0,0,0.35),\n          0 0 0 1px rgba(255,255,255,0.5);\n        transition: all 200ms ease;\n      }\n\n      \/* S\u1ed1 ph\u1ea7n tr\u0103m nh\u1ecf ph\u00eda d\u01b0\u1edbi icon \u2013 t\u1ea1o c\u1ea3m gi\u00e1c \u0111ang \u201cch\u1ea1y\u201d *\/\n      .scroll-ring__percent {\n        position: absolute;\n        left: 50%;\n        bottom: 2px;\n        transform: translateX(-50%);\n        font-size: 11px;\n        font-weight: 600;\n        color: rgba(255,255,255,0.9);\n        text-shadow: 0 1px 3px rgba(0,0,0,0.5);\n        z-index: 3;\n        pointer-events: none;\n      }\n\n      \/* Hover: icon n\u1ed5i &amp; xoay nh\u1eb9 *\/\n      .scroll-ring:hover .scroll-ring__icon i {\n        transform: translateY(-1px) scale(1.05);\n        box-shadow:\n          0 12px 24px rgba(0,0,0,0.45),\n          0 0 0 1px rgba(255,255,255,0.8);\n      }\n\n      \/* Mobile: thu nh\u1ecf l\u1ea1i *\/\n      @media (max-width: 767px) {\n        .scroll-ring {\n          right: 16px;\n          bottom: 16px;\n        }\n\n        .scroll-ring__inner {\n          height: 50px;\n          width: 50px;\n        }\n\n        .scroll-ring__icon i {\n          height: 30px;\n          width: 30px;\n          line-height: 30px;\n          font-size: 18px;\n        }\n\n        .scroll-ring__percent {\n          font-size: 10px;\n        }\n      }\n    &lt;\/style>\n\n    &lt;script>\n      jQuery(function($){\n        \"use strict\";\n\n        var $ring      = $('.scroll-ring');\n        var $percentEl = $('.scroll-ring__percent');\n        var progressEl = document.querySelector('.scroll-ring__progress');\n\n        if (!progressEl) return;\n\n        \/\/ T\u00ednh chu vi v\u00f2ng tr\u00f2n\n        var radius       = progressEl.r.baseVal.value;\n        var circumference = 2 * Math.PI * radius;\n\n        progressEl.style.strokeDasharray  = circumference + ' ' + circumference;\n        progressEl.style.strokeDashoffset = circumference;\n\n        function setProgress(percent) {\n          if (percent &lt; 0)   percent = 0;\n          if (percent > 100) percent = 100;\n\n          var offset = circumference - (percent \/ 100) * circumference;\n          progressEl.style.strokeDashoffset = offset;\n\n          \/\/ Update s\u1ed1 %\n          if ($percentEl.length) {\n            $percentEl.text(Math.round(percent) + '%');\n          }\n        }\n\n        function onScroll() {\n          var scroll = $(window).scrollTop();\n          var height = $(document).height() - $(window).height();\n          var percent = height > 0 ? (scroll \/ height) * 100 : 0;\n\n          setProgress(percent);\n\n          var offsetShow = 80; \/\/ cu\u1ed9n h\u01a1n 80px th\u00ec hi\u1ec7n\n          if (scroll > offsetShow) {\n            $ring.addClass('is-visible');\n          } else {\n            $ring.removeClass('is-visible');\n          }\n        }\n\n        \/\/ L\u1ea7n \u0111\u1ea7u &amp; khi cu\u1ed9n\n        onScroll();\n        $(window).on('scroll', onScroll);\n\n        \/\/ Click \u2192 scroll l\u00ean \u0111\u1ea7u\n        $ring.on('click', function(e){\n          e.preventDefault();\n          $('html, body').animate({ scrollTop: 0 }, 550);\n        });\n      });\n    &lt;\/script>\n    &lt;?php\n}<\/pre>","protected":false},"excerpt":{"rendered":"<p>N\u1ebfu b\u1ea1n c\u1ea3m th\u1ea5y n\u00fat back to top (l\u00ean \u0111\u1ea7u trang) m\u1eb7c \u0111\u1ecbnh c\u1ee7a theme Flatsome qu\u00e1 \u0111\u01a1n gi\u1ea3n v\u00e0 kh\u00f4ng t\u1ea1o \u0111\u01b0\u1ee3c \u0111i\u1ec3m nh\u1ea5n cho giao di\u1ec7n, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 t\u1ef1 t\u1ea1o m\u1ed9t n\u00fat m\u1edbi n\u1ed5i b\u1eadt h\u01a1n. M\u1ed9t trong nh\u1eefng ki\u1ec3u \u0111\u01b0\u1ee3c ng\u01b0\u1eddi d\u00f9ng \u01b0a chu\u1ed9ng hi\u1ec7n nay l\u00e0 n\u00fat back [&#8230;]\n","protected":false},"author":1,"featured_media":261,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_focus_keyword":"","rank_math_description":"","rank_math_title":"","footnotes":""},"categories":[11,15],"tags":[],"class_list":["post-223","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-theme"],"acf":[],"_links":{"self":[{"href":"https:\/\/muatheme247.com\/en\/wp-json\/wp\/v2\/posts\/223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/muatheme247.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/muatheme247.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/muatheme247.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/muatheme247.com\/en\/wp-json\/wp\/v2\/comments?post=223"}],"version-history":[{"count":14,"href":"https:\/\/muatheme247.com\/en\/wp-json\/wp\/v2\/posts\/223\/revisions"}],"predecessor-version":[{"id":243,"href":"https:\/\/muatheme247.com\/en\/wp-json\/wp\/v2\/posts\/223\/revisions\/243"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/muatheme247.com\/en\/wp-json\/wp\/v2\/media\/261"}],"wp:attachment":[{"href":"https:\/\/muatheme247.com\/en\/wp-json\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/muatheme247.com\/en\/wp-json\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/muatheme247.com\/en\/wp-json\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}