twigsplace Posted March 21 Share Posted March 21 Site url: www.twigsbranchphotography.com I currently have a 'back to top' button showing on my home page on the footer that I think was inherent with the site template (as in I don't recall adding any code for it). It only shows on the homepage and I'd like to add it to all pages - is this possible? Added a screenshot to show what I mean. I am on the Mint template/Marquee family 7.0. Many thanks! Link to comment
derricksrandomviews Posted March 21 Share Posted March 21 This is a simple scrolling back to the top button. It doesn't require a business plan to work. Put this code in a markdown block in the footer of your site, it will work for all pages. <p><a href="#top" class="t-top"><span class="arrow"></span>Top</a> <style> /* Back to Top */ .t-top { font-weight: 500; letter-spacing: 2px; font-size: 15px; text-transform: lowercase; text-align: center; line-height: 1.6; padding-left: 2px; padding-top: 4px; position: fixed; right: 25px; bottom: 60px; width: 40px; height: 40px; z-index: 999; background-color: transparent; color: #000; filter: drop-shadow(8px 8px 8px #666666) } .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; filter: drop-shadow(8px 8px 8px #666666) } .t-top .arrow {display:inline;} </style></p> Link to comment
twigsplace Posted March 21 Author Share Posted March 21 (edited) 1 hour ago, derricksrandomviews said: This is a simple scrolling back to the top button. It doesn't require a business plan to work. Put this code in a markdown block in the footer of your site, it will work for all pages. <p><a href="#top" class="t-top"><span class="arrow"></span>Top</a> <style> /* Back to Top */ .t-top { font-weight: 500; letter-spacing: 2px; font-size: 15px; text-transform: lowercase; text-align: center; line-height: 1.6; padding-left: 2px; padding-top: 4px; position: fixed; right: 25px; bottom: 60px; width: 40px; height: 40px; z-index: 999; background-color: transparent; color: #000; filter: drop-shadow(8px 8px 8px #666666) } .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; filter: drop-shadow(8px 8px 8px #666666) } .t-top .arrow {display:inline;} </style></p> Thank you @derricksrandomviews - sadly this didn't work for me 😞 Edited March 21 by twigsplace Tag Link to comment
derricksrandomviews Posted March 21 Share Posted March 21 (edited) It is a bit finicky if you view it as the owner, not as a visitor. Here is one from Inside the Square that may work a bit better. Place this snippet in a markdown block on any page you want the button but not in the footer. You can change the size to small, medium, or large. <a href="#page" class="sqs-block-button-element--large sqs-block-button-element" id="back-to-top">Back To Top</a> Add this to custom CSS you can change the position and the opacity to fit your style; #back-to-top{ position: fixed!important; bottom: 0!important; right: 0!important; z-index:1!important; opacity: .5 } Edited March 21 by derricksrandomviews Link to comment
twigsplace Posted March 25 Author Share Posted March 25 On 3/21/2024 at 7:21 PM, derricksrandomviews said: It is a bit finicky if you view it as the owner, not as a visitor. Here is one from Inside the Square that may work a bit better. Place this snippet in a markdown block on any page you want the button but not in the footer. You can change the size to small, medium, or large. <a href="#page" class="sqs-block-button-element--large sqs-block-button-element" id="back-to-top">Back To Top</a> Add this to custom CSS you can change the position and the opacity to fit your style; #back-to-top{ position: fixed!important; bottom: 0!important; right: 0!important; z-index:1!important; opacity: .5 } Hi @derricksrandomviews thank you, this does work but is text only, I was hoping to add the same design button that's on the homepage to all pages, rather than just have the words 'back to top' - like this screenshot? Link to comment
derricksrandomviews Posted March 25 Share Posted March 25 Try one of these installed in a footer. I suggest you remove any other back to top code first of course: https://www.scrolltotop.com/ 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