Getting "Back to Top" button to work

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. 

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