Back to Top customisation

Site URL: http://www.furkhaniqbal.com

Hello,

I have a piece of code that I've put in the footer injection.

I wanted to customise it so the back to top symbol is an outline in grey rather than it being filled. At the moment I've only managed to do this on a hover state rather than normal. I wanted to have this look for normal and when the user hovers, the outline and symbol turns white.

 

 

<style>
	#myBtn {
       width: 40px;
       height: 40px;
       display: none;
       position: fixed;
       bottom: 20px;
       right: 20px;
       z-index: 1;
        border-style: solid;
  		border-width: 1.5px;
       font-size: 13px !important;
       color: #7d7d7d;
       cursor: pointer;
       padding: 10px 10px 10px 10px;
       border-radius: 50%;
       // Change the hex code in the next line to change background color
       background-color: #000000;
    }

    #myBtn:hover {
       background-color: #000000;
    }
</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-chevron-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>

On 4/13/2022 at 3:34 PM, visionsbyfurks said:

Site URL: http://www.furkhaniqbal.com

Hello,

I have a piece of code that I've put in the footer injection.

I wanted to customise it so the back to top symbol is an outline in grey rather than it being filled. At the moment I've only managed to do this on a hover state rather than normal. I wanted to have this look for normal and when the user hovers, the outline and symbol turns white.

 

 

<style>
	#myBtn {
       width: 40px;
       height: 40px;
       display: none;
       position: fixed;
       bottom: 20px;
       right: 20px;
       z-index: 1;
        border-style: solid;
  		border-width: 1.5px;
       font-size: 13px !important;
       color: #7d7d7d;
       cursor: pointer;
       padding: 10px 10px 10px 10px;
       border-radius: 50%;
       // Change the hex code in the next line to change background color
       background-color: #000000;
    }

    #myBtn:hover {
       background-color: #000000;
    }
</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-chevron-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>

 

 

Try adding

#myBtn {
  background-color: #000000;
}

Let me know how it works

My testing

Thank you, it works, do you know how I can have it so that on hover it turns white? @bangank36

Add there #ffffff 

@Web_Solutions This fills the circle in white. I want the outline circle to highlight white and the chevron icon to turn white

On 4/17/2022 at 9:27 PM, visionsbyfurks said:

This fills the circle in white. I want the outline circle to highlight white and the chevron icon to turn white

It looks like you removed back to top. Do you still need help?

Yes please @tuanphan

On 4/20/2022 at 12:11 AM, visionsbyfurks said:

Yes please @tuanphan

You can add back to top, then we can check easier.

If your site is live & can't add it, try duplicate the site & add there