Tạo nút back to top Flatsome bao đẹp

Đã lâu rồi chưa rãnh để share có anh em mấy cái ăn liền, đỡ phải code kéo nhét vào ăn ngay, hôm nay rãnh share ae code nút back to top flatsome đẹp.

Xem demo tại đây

Thêm code bên dưới vào file Function.php sau đó save

add_action( 'init', 'camap_remove_backtotop');
function camap_remove_backtotop() {
     remove_action( 'flatsome_footer', 'flatsome_go_to_top' );
}

add_action('wp_footer','camap_backtotop');
function camap_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>
        (function($) { "use strict";

          $(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 = $(window).scrollTop();
              var height = $(document).height() - $(window).height();
              var progress = pathLength - (scroll * pathLength / height);
              progressPath.style.strokeDashoffset = progress;
            }
            updateProgress();
            $(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;
            })
            
            
          });
          
        })(jQuery); 
    </script>
    <?php
}

Thế là xong rồi. follow fanpage https://www.facebook.com/camapcode để theo dõi có gì hay hoặc share theme sẽ cập nhật nhé . Chúc các bạn thành công

Nguồn: https://camapcode.com/flatsome/tao-nut-back-to-top-flatsome-bao-dep/

Quét mã QR để đọc bài viết này để xem tiếp trên điện thoại