Guest Posted March 14, 2022 Posted March 14, 2022 I have found many useful things here and elsewhere about adding a "Scroll To Top" button in the corner of my page; I would love to be able to make it appear once you have gone down some in the page, not at the beginning. However, everything seems to require access to the Code Injection feature, which is frustratingly only an option for the Business or Commerce level sites, not regular Premium/Personal. Does anyone know a way to do so without the Code Injection process? Thanks.
tuanphan Posted March 15, 2022 Posted March 15, 2022 With regular Personal Plan Edit Your site Footer >> Add a Code Block > Paste this code <a href="#top" class="t-top"><span class="arrow"></span>Top</a> <style> /* Back to Top */ .t-top { font-weight: 300; letter-spacing: 3px; font-size: 15px; text-transform: uppercase; text-align: center; line-height: 1.6; padding-left: 2px; padding-top: 4px; position: fixed; right: 30px; bottom: 30px; width: 40px; height: 40px; z-index: 999; background-color: transparent; color: #000; } .t-top .arrow:before { font-family: 'squarespace-ui-font'; font-style: normal; font-weight: 300; font-size: 20px; line-height: 1; -webkit-font-smoothing: antialiased; content: "\e02d"; text-align: center; display: block; vertical-align: middle; transform: rotate(-90deg); cursor: pointer; margin-left: -4px; } .t-top .arrow {display:inline;} </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
tommmmusic Posted May 24, 2022 Posted May 24, 2022 Site URL: https://accordion-jaguar-tztz.squarespace.com/config/ Hi, how do I add a button at the top of the footer that allows the page to scroll to top of page? Option 1: I have a friend who also built a Squarespace site, and I'd like to do the same as his, so it sits on the line: Option 2: Either this or a floating arrow that fades in appearing on the right hand side as you reach the end of the page; this guy has a tutorial showing you how to do it (https://www.will-myers.com/articles/building-a-back-to-top-button-in-squarespace), but I don't have Premium, so I don't have the Advanced code injection available - is there anyway to add that type of thing on Design > Custom CSS? Many thanks for your help! Tomm
tommmmusic Posted May 24, 2022 Posted May 24, 2022 @tuanphan Thanks for sharing this code. Is there any way to apply this code only on particular pages (ie pages that are longer, in my case the PROJECTS pages (TV DRAMA / FEATURE FILM / SHORTS / TRAILERS only)? I tried adding a code block to the end of my TV DRAMA page, but it didn't recognise the code. I also asked about this here; site: https://accordion-jaguar-tztz.squarespace.com/config/ pass: ost Many thanks! Tomm
tuanphan Posted May 24, 2022 Posted May 24, 2022 1 hour ago, tommmmusic said: @tuanphan Thanks for sharing this code. Is there any way to apply this code only on particular pages (ie pages that are longer, in my case the PROJECTS pages (TV DRAMA / FEATURE FILM / SHORTS / TRAILERS only)? I tried adding a code block to the end of my TV DRAMA page, but it didn't recognise the code. I also asked about this here; site: https://accordion-jaguar-tztz.squarespace.com/config/ pass: ost Many thanks! Tomm You can add to Site Footer, then edit page (page where you want to button not appear) > Add a Code Block > Paste this code <style> a.t-top { display: none !important; visibility: hidden !important; opacity: 0 !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
tommmmusic Posted May 24, 2022 Posted May 24, 2022 6 minutes ago, tuanphan said: You can add to Site Footer, then edit page (page where you want to button not appear) > Add a Code Block > Paste this code <style> a.t-top { display: none !important; visibility: hidden !important; opacity: 0 !important; } </style> Thank you @tuanphan! Is there any way to make the button only appear as you scroll down the page / disappear as you scroll back up?
tommmmusic Posted May 24, 2022 Posted May 24, 2022 Hey @tuanphanthe only problem is that by creating a code block in the footer, it messes up the spacing and symmetry I had between the logo and the text, in the mobile version: Also, same problem; where can I put this code to make the "TOP" button disappear, without more blank space being created in the footer: <style> a.t-top { display: none !important; visibility: hidden !important; opacity: 0 !important; } </style> NB: I only have a personal account, not business so I can't inject code... Thanks again, Tomm
tuanphan Posted May 28, 2022 Posted May 28, 2022 On 5/25/2022 at 8:38 AM, tommmmusic said: Thank you @tuanphan! Is there any way to make the button only appear as you scroll down the page / disappear as you scroll back up? Not possible. This require Script code. Personal Plan doesn't support script code. On 5/25/2022 at 9:32 AM, tommmmusic said: Hey @tuanphanthe only problem is that by creating a code block in the footer, it messes up the spacing and symmetry I had between the logo and the text, in the mobile version: Also, same problem; where can I put this code to make the "TOP" button disappear, without more blank space being created in the footer: <style> a.t-top { display: none !important; visibility: hidden !important; opacity: 0 !important; } </style> NB: I only have a personal account, not business so I can't inject code... Thanks again, Tomm All Plans support Code Block. Include trial plan + personal plan. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment