PJIFD Posted November 17, 2020 Share Posted November 17, 2020 Hi everybody, Hope you're well. I have a question regarding my attempt to get a "Back to top" button. I have followed all the advice listed from the top rated post (HammaadM) here: https://forum.squarespace.com/topic/10886-how-can-i-add-a-scroll-to-top-button/ This means A) I have added a code block in my footer with code: <a href="#" class="scrollup">Scroll</a> B) I have added to custom CSS the following code (the URL is the Back to Top button I'd like to use): .scrollup { width: 40px; height: 40px; opacity: 0.3; position: fixed; bottom: 50px; right: 100px; display: none; text-indent: -9999px; background: url('https://i.ibb.co/m6SvsMy/Back-to-top-icon.png') no-repeat; } C) I have added to the Header the following JS: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> $(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function () { $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script> However, I'm not seeing the Back to Top button working at all on my site (which is currently Private and in Preview mode). I wondered if anyone had experienced similar or had any ideas why this isn't working? I can't see anything at the moment - nothing in the Footer, and certainly no image that appears as the site is being scrolled which is what I was hoping to achieve. Thanks very much in advance for any help you can provide. Beyondspace 1 Link to comment
Beyondspace Posted November 20, 2020 Share Posted November 20, 2020 On 11/17/2020 at 11:56 PM, PJIFD said: Hi everybody, Hope you're well. I have a question regarding my attempt to get a "Back to top" button. I have followed all the advice listed from the top rated post (HammaadM) here: https://forum.squarespace.com/topic/10886-how-can-i-add-a-scroll-to-top-button/ This means A) I have added a code block in my footer with code: <a href="#" class="scrollup">Scroll</a> B) I have added to custom CSS the following code (the URL is the Back to Top button I'd like to use): .scrollup { width: 40px; height: 40px; opacity: 0.3; position: fixed; bottom: 50px; right: 100px; display: none; text-indent: -9999px; background: url('https://i.ibb.co/m6SvsMy/Back-to-top-icon.png') no-repeat; } C) I have added to the Header the following JS: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> $(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function () { $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script> However, I'm not seeing the Back to Top button working at all on my site (which is currently Private and in Preview mode). I wondered if anyone had experienced similar or had any ideas why this isn't working? I can't see anything at the moment - nothing in the Footer, and certainly no image that appears as the site is being scrolled which is what I was hoping to achieve. Thanks very much in advance for any help you can provide. You can set up a Site-wide passwords – Squarespace Help so we can look into your site issue and get it sorted real quick Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you 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