UpstreamBrian Posted July 2, 2020 Share Posted July 2, 2020 I'm trying to add this Back to Top Button with Scroll Progress Indicator to my site. https://www.jqueryscript.net/other/back-top-scroll-indicator.html I'm adding the code into code injection (footer), but I can't get it to work. I'm probably missing something. This is what I have done: <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: 50px; bottom: 50px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2); 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; content: '↑'; text-align: center; line-height: 46px; font-size: 24px; color: #ecedf3; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 1; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .progress-wrap:hover::after { opacity: 0; } .progress-wrap::before { position: absolute; content: '↑'; text-align: center; line-height: 46px; font-size: 24px; opacity: 0; background-image: linear-gradient(298deg, #da2c4d, #f8ab37); -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: #ecedf3; stroke-width: 4; box-sizing:border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear; } </style> <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" crossorigin="anonymous"></script> <script> 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 up<a href="https://www.jqueryscript.net/time-clock/">date</a>Progress = 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; }); </script> Link to comment
tuanphan Posted July 5, 2020 Share Posted July 5, 2020 Can you share link to your site? We can check easier. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
rwp Posted July 5, 2020 Share Posted July 5, 2020 This line of code is messed up var up<a href="https://www.jqueryscript.net/time-clock/">date</a>Progress = function () { and should say this var updateProgress = function () { I don't know if that will fix it, there might be more issues. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.