Back to top floating button

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

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>

Thanks a lot, I will try to do this!

Sorry bangank36 it says: Missing Opening `{`

Can you help?

11 minutes ago, Damien23 said:

Sorry bangank36 it says: Missing Opening `{`

Can you help?

 

I am checking

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

1 minute ago, Damien23 said:

 

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

Settings -> Advanced -> Code Injection -> footer

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

Yes yes yes. Thanks a million it works! Super! 

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 

@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.

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.

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

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

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

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'

The snippet using this icon from fontawesome

Font Awesome

@bangank36 works like a charm! thanks buddy.

@bangank36 - this has done the job for me too. Many thanks!

Is there a setting that you can use to go back to the top of the page you are on?

Thks

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!

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;

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

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?

@bangank36 Id have to screen record, but it's pretty easy to understand.

In other words, how to make the button slowly appear (fade in) when it first appears when scrolling down? It is currently immediate 

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