Thông tin liên hệ

Quốc Trần - Quận Gò Vấp, TP. Hồ Chí Minh

Liên hệ hỗ trợ 0906891294 Zalo
Mạng xã hội
Tạo nút back to top Flatsome bao đẹp
Avatar
Cá Mập
  • 02/06/2022
  • Flatsome

Đã 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

3/5 - (6 bình chọn)
Avatar
Cá Mập

Cá Mập code lập trình wordpress, chia sẽ kiến thức, thủ thuật về web wordpress. Liên hệ làm việc 0906 891 294 ( Phone, Zalo )