Back to top floating button

see how it's immediate? that's the issue. I want it to fade in.

@bangank36

@Beyondspace Thanks for contributing this code! It's working great. My only question is if it's possible to swap out the arrow icon for an SVG or PNG? I'd like to adjust the stroke width and terminal style so that it matches the style of my hamburger menu icon. Thank you!

You can try replacing this code with your SVG element

For the PNG, you can upload your image on Home > Design > Custom Css then get the URL and use it as a background or use pseudo-element to achieve your target

Hi I know this is an old post, but this is exactly what I am trying to do so I hope you can help me.
The code I have used from this thread and included in the code-injection is as follows:
Everything placement wise, size etc is perfect, just changing it to the PNG is hurting my head :S

Anything you can help with would be amazing.

<style>
    #myBtn {
       width: 50px;
       height: 50px;
       display: none;
       position: fixed;
       bottom: 20px;
       right: 30px;
       z-index: 99;
       border: #ff2e00;
       outline: #aeaeae;
       font-size: 25px !important;
       color: #ff2e00;
       cursor: pointer;
       padding: 10px 10px 10px 11px;
       border-radius: 50%;
       box-shadow: 0px 0px 0px #000;
       background-color: none;
    }

  
</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-angle-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>

And the link I used to change the button is below https://static1.squarespace.com/static/643d1f745d3d3e36eeeb21a4/t/6502f57070c57d17c0564302/1694692720913/Arrow+button+-+Up.png  

Can you let me know how I need to amend the code above to make this the 'back to top' button?

Thanks!

P

On 9/14/2023 at 7:07 PM, PWinter said:

Hi I know this is an old post, but this is exactly what I am trying to do so I hope you can help me.
The code I have used from this thread and included in the code-injection is as follows:
Everything placement wise, size etc is perfect, just changing it to the PNG is hurting my head :S

Anything you can help with would be amazing.

<style>
    #myBtn {
       width: 50px;
       height: 50px;
       display: none;
       position: fixed;
       bottom: 20px;
       right: 30px;
       z-index: 99;
       border: #ff2e00;
       outline: #aeaeae;
       font-size: 25px !important;
       color: #ff2e00;
       cursor: pointer;
       padding: 10px 10px 10px 11px;
       border-radius: 50%;
       box-shadow: 0px 0px 0px #000;
       background-color: none;
    }

  
</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-angle-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>

 

And the link I used to change the button is below https://static1.squarespace.com/static/643d1f745d3d3e36eeeb21a4/t/6502f57070c57d17c0564302/1694692720913/Arrow+button+-+Up.png  

Can you let me know how I need to amend the code above to make this the 'back to top' button?

Thanks!

P

You mean replace back to top arrow icon in the code with your custom image?

On 9/17/2023 at 4:11 AM, tuanphan said:

You mean replace back to top arrow icon in the code with your custom image?

Yes that's correct. Thank you.

On 9/19/2023 at 5:04 PM, PWinter said:

Yes that's correct. Thank you.

Add this code under. If it doesn't work, please share site url, we can check easier

<style>
  #myBtn i {
  	visibility: hidden;
  }
  #myBtn {
  	background-image: url(https://static1.squarespace.com/static/643d1f745d3d3e36eeeb21a4/t/6502f57070c57d17c0564302/1694692720913/Arrow+button+-+Up.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
</style>