Jump to content

Back to Top Button (make it appear/disappear on scroll)

Recommended Posts

Site URL: https://www.riverdaleruralholidays.com

Hi all, this is the code that I have in my 7.1 site in the custom CSS for a floating Back to Top button and working well, with thanks to tutorials where I found this, as I am NOT an experienced coder. I am just copying basic codes like this button🤗 and when I can understand them I am making minor adjustments at the most.
#back-to-top{position:fixed!important; bottom:14px!important; right:12px!important; z-index:1!important;opacity:.4;font-size:22px;color:white!important;padding:8px;}
I added in a code block in the footer to make the button appear on all pages of the website, and I used the unicode character ▲ instead of the word TOP. This is the code in my code block:
<a href="#page" class="sqs-block-button-element--small sqs-block-button-element" id="back-to-top"> ▲ </a>
It's all working well, and looking neat, BUT NOW I NEED SOME ADVICE for the next step!
I would like to set the distance to bottom to e.g. 164px (looks better if the button is not getting absorbed into the dark footer), but then I REALLY need to add FIRST that kind of Javascript that makes the button disappear when the page is at its top already. Assuming it is Javascript that does a thing like that?
I already got some script kindly donated through a Facebook group found through a link here, but it did not work. Possibly because the target (id?) of the standard Javascript was not identical to the button name (address?) that I used in the code block on the page, and my attempt to make them identical did not work. I assume adding the script to the page header code injection was the right place for it?
My website is www.riverdaleruralholidays.com if anyone cares to take a look. Pic below is how my button looks. Ideally, the button should not go further down on scroll than stopping just above the footer (I know how to adjust that, it looks good if I set bottom:164px in the Custom CSS) but then I want the button to disappear when the top of the page is in view and appear only when scrolling down. It now shows the button about halfway the viewport if the top of the page is already visible, so that looks a bit weird seeing it next to the first image on the page. So for now I left it set to bottom:12px. But even then it would be better if it appeared only when scrolling down as you don't need it when you are at the top of the page.
Maybe I should add that I also have a smooth scroll instruction in the Custom CSS, not sure whether that could interfere? That reads 
html {
scroll-behavior: smooth;

I would need some Javascript (I guess?) that is working from the names and id that my code in the code block already has, or a bit more instruction how to adjust if it is a standard code.




Link to comment

Try adding this to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
$(document).ready(function () {
       $(window).scroll(function () {
           if ($(this).scrollTop() > 200) {
           } else {
       $('.scrollup').click(function () {
           $("html, body").animate({
               scrollTop: 0
           }, 600);
           return false;


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

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.