Jump to content

Back to top floating button

Recommended Posts

Site URL: https://madminiperformance.co.uk

Hi,

 

I am trying to have a floating button on the right hand side of my shop. When the user scroll through the products the button shows up to help the user to go back up. Ideally I would like the button to show on the main shop page as well as in categories.

Does anyone knows how I can achieve this?

See attached picture, excuse the beautiful drawing, white button.

Thanks,

Damien

20201102_114608.jpg

Link to comment

Here is one way

Squarespace: How to Add a Back to Top Button (adlyticmarketing.com)

You can add this into custom code injection section (instruction)

<style>
	#myBtn {
       width: 50px;
       height: 50px;
       display: none;
       position: fixed;
       bottom: 20px;
       right: 30px;
       z-index: 99;
       border: none;
       outline: none;
       font-size: 25px !important;
       color: white;
       cursor: pointer;
       padding: 10px 10px 10px 11px;
       border-radius: 50%;
       box-shadow: 1px 1px 5px #000;
       // Change the hex code in the next line to change background color
       background-color: #a4a4a4;
    }

    #myBtn:hover {
       background-color: #aeaeae;
    }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous"></script>
<button onclick="topFunction()" id="myBtn" title="Go to top">
    <i class="fas fa-arrow-up"></i>
</button>
<script>
   window.onscroll = function() {scrollFunction()};

   function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
         document.getElementById("myBtn").style.display = "block";
      } else {
         document.getElementById("myBtn").style.display = "none";
      }
   }

   function topFunction() {
      $('html,body').animate({ scrollTop: 0 }, 1000);
   }
</script>

 

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
11 minutes ago, Damien23 said:

Sorry bangank36 it says: Missing Opening `{`

Can you help?

 

I am checking

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

Could you show me the issue? I used it on my site and working perfectly

image.thumb.png.d4aff0653aae0f57a78057ab99c1ccec.png

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
1 minute ago, Damien23 said:

image.thumb.png.b8e90daf7ac507f863f8197385a12185.png

 

It's not custom css, per my intruction link above it should be this path

Settings -> Advanced -> Code Injection -> footer

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
8 minutes ago, Damien23 said:

Oh I see I was stupid. I will try again thanks 🙂

Check this url, it has stuff you can follow 

 

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
  • 2 months later...
31 minutes ago, Supremo said:

@bangank36 Hey, the code worked great. May I know how to change the icon, I would like to remove the straight-line in the arrow and only leave with the arrow head. 

Much appreciated,

Supremo

Picture attached below would be the reference.

Screen Shot 2021-01-15 at 9.44.19 PM.png

Would you mind to share your site with the code working I can help

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
5 minutes ago, DarrenLyons said:

@bangank36 Is there a way to change the button color, not the shadow or the hover color? TIA

You can replace the hex code here

image.png.4274777b04a602f9ae03c240fa30770f.png

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
2 hours ago, Supremo said:

@bangank36 thank you.

supremo-essential.squarespace.com

pw:essentials

In the html snippet, change the word 'fa-arrow-up' to 'fa-angle-up'

image.png.f6885f493244a7255e030f9f216d1f3b.png

The snippet using this icon from fontawesome

Font Awesome

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
  • 4 months later...
  • 5 months later...
  • 6 months later...
On 11/2/2020 at 8:48 AM, bangank36 said:

It's not custom css, per my intruction link above it should be this path

Settings -> Advanced -> Code Injection -> footer

Hi @bangank36 - Do you know what the code would be if I wanted the button on the bottom left side of my page? I currently have a live chat bubble on the bottom right side, so the two are overlapping. The code worked perfectly, though!

Link to comment
On 4/29/2022 at 9:50 PM, jclinch said:

Hi - Do you know what the code would be if I wanted the button on the bottom left side of my page? I currently have a live chat bubble on the bottom right side, so the two are overlapping. The code worked perfectly, though!

in the code

change

right: 30px;

to

left: 30px;

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
1 hour ago, Cara2408 said:

hi @bangank36 how can we make this button ease in transparancy when scrolling down? rather than it just BAM! appear. Thanks 🙂

Do you have any sample or screenshots to make your idea clear?

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

Can you share your site so I can take a look?

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

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.