Cách tạo nút Back To Top trên theme Flatsome bao đẹp

Nay mình share cho anh em code nút back to top trên theme flatsome đẹp giúp anh em đỡ phải code nhiều mà chỉ cần nhét vào là ăn ngay.

Back To Top trên web là gì?

“Back to top” (quay lên đầu trang) là một chức năng thường được sử dụng trên các website để cho phép người dùng trở về đầu trang của trang web một cách nhanh chóng và thuận tiện hơn. Thông thường, nút “Back to top” được đặt ở cuối mỗi trang web và khi người dùng nhấn vào nút này, trang web sẽ tự động cuộn lên đầu trang. Chức năng này giúp tiết kiệm thời gian cho người dùng khi phải cuộn lên đầu trang bằng cách kéo thanh cuộn của trình duyệt.

Thêm code dưới đây vào file Function.php

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 }

Tạm kết

Chỉ với 1 bước thế là xong rồi. Theo dõi bài viết mới về thủ thuật coder hay phần mềm của wordpress bạn hãy theo dõi TMO Agency nhé . Chúc các bạn thành công!