Jump to content

Getting "Back to Top" button to work

Recommended Posts

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. 

Link to comment
  • Replies 1
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.