jayrdann Posted July 24, 2022 Share Posted July 24, 2022 Site URL: http://www.thenajinproject.squarespace.com Hi, I'm needing help adding these behaviours to the "back to top" button on my site: For it's background to be a white circle For it to only appear after the user has scrolled down I would also be so grateful if you can help me understand why the code block that sits in my footer for this button is so large in height on mobile. And help me reduce it so that the footer on mobile isn't huge. Site password: Fatu Link to comment
Solution jaydiprewa Posted July 24, 2022 Solution Share Posted July 24, 2022 (edited) Simply paste the code in Setting > Advanced > Header <div id="scroll-here"></div> <a id="back-to-top" href="#scroll-here"> <img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='title' aria-describedby='desc' role='img' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EAngle Up%3C/title%3E%3Cdesc%3EA line styled icon from Orion Icon Library.%3C/desc%3E%3Cpath data-name='layer1' fill='none' stroke='%23202020' stroke-miterlimit='10' stroke-width='2' d='M20 40l11.994-14L44 40' stroke-linejoin='round' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E" alt="Angle Up" /> </a> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script> $(function(){ //Function To Add Class function showBackToTop(){ $('#back-to-top').addClass('show-btt'); } //Function To Add Class function hideBackToTop(){ $('#back-to-top').removeClass('show-btt'); } //Check Scroll and Add Class function checkScrollPos(){ if ($(this).scrollTop() >= 700) { //if scroll position is lower than 700px from the top of the screen showBackToTop(); } else { hideBackToTop() } } // tell the browser to run the "checkScrollPos()" function just above when the user scrolls $(window).on('scroll', function(){ checkScrollPos(); }); //Check the scroll position once when the page loads checkScrollPos(); }) </script> <style> html { scroll-behavior:smooth } #back-to-top{ height:50px; width:50px; position:fixed; right:0; z-index:99; border-radius:50%; box-shadow: 0px 0px 5px #ccc; margin:17px; background:white; /Position Out of View/ bottom:-150px; opacity:0; transition: all .5s ease; } #back-to-top.show-btt{ /Position In View/ bottom:0; opacity:1; transition: all .5s ease; } </style> for you have to hide your current code <style> .t-top { display:none !important; } </style> Add this also in same header block Edited July 24, 2022 by jaydiprewa revise the code jayrdann 1 Link to comment
jayrdann Posted July 24, 2022 Author Share Posted July 24, 2022 19 minutes ago, jaydiprewa said: Simply paste the code in Setting > Advanced > Header <div id="scroll-here"></div> <a id="back-to-top" href="#scroll-here"> <img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='title' aria-describedby='desc' role='img' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EAngle Up%3C/title%3E%3Cdesc%3EA line styled icon from Orion Icon Library.%3C/desc%3E%3Cpath data-name='layer1' fill='none' stroke='%23202020' stroke-miterlimit='10' stroke-width='2' d='M20 40l11.994-14L44 40' stroke-linejoin='round' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E" alt="Angle Up" /> </a> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script> $(function(){ //Function To Add Class function showBackToTop(){ $('#back-to-top').addClass('show-btt'); } //Function To Add Class function hideBackToTop(){ $('#back-to-top').removeClass('show-btt'); } //Check Scroll and Add Class function checkScrollPos(){ if ($(this).scrollTop() >= 700) { //if scroll position is lower than 700px from the top of the screen showBackToTop(); } else { hideBackToTop() } } // tell the browser to run the "checkScrollPos()" function just above when the user scrolls $(window).on('scroll', function(){ checkScrollPos(); }); //Check the scroll position once when the page loads checkScrollPos(); }) </script> <style> html { scroll-behavior:smooth } #back-to-top{ height:50px; width:50px; position:fixed; right:0; z-index:99; border-radius:50%; box-shadow: 0px 0px 5px #ccc; margin:17px; background:white; /Position Out of View/ bottom:-150px; opacity:0; transition: all .5s ease; } #back-to-top.show-btt{ /Position In View/ bottom:0; opacity:1; transition: all .5s ease; } </style> for you have to hide your current code <style> .t-top { display:none !important; } </style> Add this also in same header block Unreal! Thank you Could you help me have it in the bottom right of the page, instead of the top right? Link to comment
jaydiprewa Posted July 24, 2022 Share Posted July 24, 2022 replace this code please with existing #back-to-top.show-btt { bottom: 0; opacity: 1; transition: all .5s ease; } #back-to-top { height: 50px; width: 50px; position: fixed; right: 0; z-index: 99; border-radius: 50%; box-shadow: 0px 0px 5px #ccc; margin: 17px; background: white; bottom: -150px; opacity: 0; transition: all .5s ease; } Link to comment
jayrdann Posted July 25, 2022 Author Share Posted July 25, 2022 14 hours ago, jaydiprewa said: replace this code please with existing #back-to-top.show-btt { bottom: 0; opacity: 1; transition: all .5s ease; } #back-to-top { height: 50px; width: 50px; position: fixed; right: 0; z-index: 99; border-radius: 50%; box-shadow: 0px 0px 5px #ccc; margin: 17px; background: white; bottom: -150px; opacity: 0; transition: all .5s ease; } You are so good! Can't thank you enough 🙂 Link to comment
jaydiprewa Posted July 25, 2022 Share Posted July 25, 2022 Welcome - Anytime if any issue or update needed please let me know. you can mark it solved and rate my solution. Have a great day. Link to comment
SandraC Posted November 26, 2022 Share Posted November 26, 2022 How would I make this apply to each page on the website instead of just one, please? Thanks! Link to comment
SandraC Posted November 28, 2022 Share Posted November 28, 2022 @jaydiprewamight you know how to get this to apply on all pages versus just one? thanks so much! Link to comment
tuanphan Posted December 2, 2022 Share Posted December 2, 2022 On 11/29/2022 at 2:42 AM, SandraC said: @jaydiprewamight you know how to get this to apply on all pages versus just one? thanks so much! Where did you add the code? Page Header, Code Block or Site wide Code Injection? If add to Site wide Code Injection, it should run on all pages 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
bjt Posted January 25 Share Posted January 25 This is great - love the style of it. My only issue is that on mobile it blocks my menu hamburger from being clickable (and also flashes up massive when the page is loading). Link to comment
r1ch4rd Posted January 26 Share Posted January 26 This is just what I was looking for. Only issue is that I can't get it to work. It shows up as expected, just doesn't do anything when clicked. Any suggestions? Link to comment
tuanphan Posted January 28 Share Posted January 28 On 1/25/2023 at 9:35 PM, bjt said: This is great - love the style of it. My only issue is that on mobile it blocks my menu hamburger from being clickable (and also flashes up massive when the page is loading). On 1/26/2023 at 10:28 PM, r1ch4rd said: This is just what I was looking for. Only issue is that I can't get it to work. It shows up as expected, just doesn't do anything when clicked. Any suggestions? If 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
bjt Posted January 29 Share Posted January 29 Http://benjackthomas.com - I've taken off as it was blocking the menu hamburger Link to comment
tuanphan Posted February 3 Share Posted February 3 On 1/30/2023 at 3:47 AM, bjt said: Http://benjackthomas.com - I've taken off as it was blocking the menu hamburger You can add this to Settings > Advanced > Code Injection > Footer <!-- Scroll To Top Button HTML --> <button id="wm-back-to-top"> <div class="btt-background"></div> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" role="img" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Angle Up</title> <path data-name="layer1" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M4 42 l28 -26 L60 42" stroke-linejoin="round" stroke-linecap="round"></path> </svg> </div> <p class="text">To Top</p> </button> <!-- Scroll To Top Button Javascript --> <script> (function() { let throttlePause; document.addEventListener('click', function(e) { if (!e.target.closest('#wm-back-to-top')) return; window.scrollTo({ top: 0, behavior: 'smooth' }) }) document.addEventListener('DOMContentLoaded', function(){ let btt = document.querySelector('#wm-back-to-top'); if (btt?.closest('.sqs-block-content')){ btt.closest('.sqs-block-content').style.display = 'inline'; } }); const throttle = (callback, time) => { if (throttlePause) return; throttlePause = true; setTimeout(() => { callback(); throttlePause = false; }, time); }; const checkPos = () => { let pos = document.documentElement.scrollTop, revealHeight = window.innerHeight * 0, bttButton = document.querySelector('#wm-back-to-top'); if (pos >= revealHeight) { bttButton.classList.add('show'); } else { bttButton.classList.remove('show'); } } window.addEventListener("scroll", () => { throttle(checkPos, 150); }); window.addEventListener('DOMContentLoaded', checkPos) }()); </script> Next, add this to Design > Custom CSS /** * Back To Top Button Styles * From Will-Myers.com */ #wm-back-to-top { z-index:999; position:fixed; display:flex; bottom:0; right:0; min-width: 50px; min-height: 50px; flex-direction: column; gap: 8px; align-items:center; justify-content:center; box-sizing:content-box; margin: 8px; padding: 5px; cursor:pointer; opacity:0; overflow:hidden; transform: translateY(0px) scale(1); background:transparent; border-radius: 0px; border-width: 0px; border-color: #000000; border-style:solid; visibility:hidden; transition: opacity .3s ease, transform .3s ease, visibility 0s ease .3s; will-change:transform; backdrop-filter: blur(0px); &.show{ transform: translateY(0px); opacity:1; visibility: visible; transition: opacity .3s ease, transform .3s ease, visibility 0s ease 0s; } .icon{ position:relative; display:flex; justify-content:center; line-height:0; height:auto; width:auto; } .text{ position:relative; margin:0; font-size: 0.8rem; font-weight: 500; color: #000000; text-transform: uppercase; } svg{ width: 20px; height: 20px; } path{ stroke-width: 5px; stroke: #000000; } .btt-background { box-sizing:border-box; position:absolute; top:0; left:0; height:100%; width:100%; background-color: #f5f5f5; opacity: 1; transition: opacity .3s ease; } &:hover{ transform:translateY(-3px); opacity: .85; } &:active{ transform: translateY(-3px) scale(.95); } } mhoelzer 1 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
mhoelzer Posted April 27 Share Posted April 27 @tuanphan Thank you! This just helped me soooooo much! Link to comment
tuanphan Posted May 20 Share Posted May 20 On 5/18/2023 at 5:04 AM, jake98 said: If i wanted to use this code but with a custom arrow up instead - how would i do this please? Just add the code, then share site url, we will give the code to replace current icon with your desired image jake98 1 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
tuanphan Posted May 22 Share Posted May 22 On 5/21/2023 at 4:45 AM, jake98 said: hi there all done What is your site url? 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
tuanphan Posted May 25 Share Posted May 25 On 5/23/2023 at 7:26 AM, jake98 said: readalmostfamous.com Add to Design > Custom CSS .btt-background { background-color: transparent !important; background-image: url(https://content.invisioncic.com/p289038/monthly_2023_05/image.png.f6a8e76121157176bc3c1ffa62625963.png) !important; background-size: cover; background-repeat: no-repeat; background-position: center center; } button#wm-back-to-top>*:not(:first-child) { visibility: hidden; } jake98 1 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
karan Posted May 29 Share Posted May 29 17 minutes ago, jake98 said: thank you so much for this @tuanphan - is it possible to make it a titchy bit smaller and for the top of the arrow not to be cut off? thank you so so much for your help ❤️ Add to Design > Custom CSS #wm-back-to-top{ min-height: 65px; } jake98 1 Please feel free to message if you need any assistance. I'll reply within 24 hours. You can also send a forum message. If you appreciate my assistance and would like to make a donation, please click here. Your support is greatly appreciated! Link to comment
karan Posted May 29 Share Posted May 29 12 hours ago, jake98 said: thank you @karan is it possible to make the arrow slightly smaller? your fix helped it being cut off! - so thank you Add to Design > Custom CSS #wm-back-to-top .btt-background { height: 89%; width: 85%; } Let me know if its solves size issue. jake98 1 Please feel free to message if you need any assistance. I'll reply within 24 hours. You can also send a forum message. If you appreciate my assistance and would like to make a donation, please click here. Your support is greatly appreciated! Link to comment
jake98 Posted May 31 Share Posted May 31 @karan THIS WORKED THANKS SO MUCH! last request (promise) is there code i can use so that i can have it one size on web and another on mobile? thanks Link to comment
karan Posted June 2 Share Posted June 2 On 5/31/2023 at 10:22 PM, jake98 said: @karan THIS WORKED THANKS SO MUCH! last request (promise) is there code i can use so that i can have it one size on web and another on mobile? thanks Okay remove previous code I have sent for arrow size. Copy new code from below and add it. #wm-back-to-top .btt-background { height: 60%; width: 60%; } @media (max-width:767px){ height: 100%; width: 100%; } tuanphan 1 Please feel free to message if you need any assistance. I'll reply within 24 hours. You can also send a forum message. If you appreciate my assistance and would like to make a donation, please click here. Your support is greatly appreciated! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment