change button icon

change button icon

What library are the code snippets from the code customization section using?

I'd like to change the icon for the 'back to top' code.

Also, the code only works when I put it into a code snippet element. It doesn't work in header/footer code in edit page section. Any help with this would also be appreciated.


<style>
.rounded-floating-btn {
    position: fixed;
    right: 20px;
    width: 50px !important;
    height: 75px !important;
    bottom: 20px;
    padding: 15px;
    z-index: 5;
    border-radius: 2px;
    cursor: pointer;
    background-color: #101010;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 70%;
    font-weight: 400;
}
.floated-btn-svg-icon {
    width: 20px;
    fill: #fff;
    margin: 0 auto;
    margin-top: 3px;
}
.rounded-floating-btn .zptext {
    margin-top: 3px;
}
</style>
<script>
window.onload=function(){
var div = document.createElement('div');
div.innerHTML='<div class="zpelem-box zpelement zpbox-container zpdefault-section zpdefault-section-bg rounded-floating-btn" data-background-type="none" style="display:none" id="scrollToTop"><div class="floated-btn-svg-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.831 268.832"><path d="M223.255 83.659l-80-79.998c-4.881-4.881-12.797-4.881-17.678 0l-80 80c-4.883 4.882-4.883 12.796 0 17.678 2.439 2.44 5.64 3.661 8.839 3.661s6.397-1.221 8.839-3.661l58.661-58.661v213.654c0 6.903 5.597 12.5 12.5 12.5 6.901 0 12.5-5.597 12.5-12.5V42.677l58.661 58.659c4.883 4.881 12.797 4.881 17.678 0 4.882-4.881 4.882-12.795 0-17.677z"></path></svg></div><div class="zptext zptext-align-center"><p>TOP</p></div></div>';
div.addEventListener('click',function(e){
    e.preventDefault();
    window.scrollTo(0,0);
})
document.body.appendChild(div);    
}
window.onscroll = function() {
    var threshold = 50; // Pixels after the scrol to top should show
    scrollToTop.style.display = (document.body.scrollTop > threshold || document.documentElement.scrollTop > threshold) ? 'block' : 'none';
  };
</script>



      • Sticky Posts

      • Unveiling Zoho Sites 2.0 - A new dimension in website building

        Dear Zoho Sites Users, We are thrilled to announce the launch of Zoho Sites 2.0 today! This refresh represents a significant step forward in the capabilities of Zoho Sites and is crucial for creating a lasting and positive impact on our customers' businesses.

      • Website Accessibility

        I have two sites created in Zoho Sites which are both live. Some questions: 1. Are any of the template themes WCAG 2.1 AA compliant? 2. How do I change the format of a sub-heading in the header section? 3. Is there any way to add focus indication for

      • Visual Editor Webinar

        Join our FREE live webinar to learn how to use the Zoho Sites Visual Editor to easily design your website. Our product specialist will demonstrate how this tool will help you customize your website to suit your requirements.  Register here: https://www.zoho.com/sites/webinars/

      • SEO for your Zoho Sites Website

        Join our live webinar to learn how to use Zoho Sites' SEO tools to boost your website's ranking. Our product specialist will demonstrate everything you need to know about optimizing your web pages to make them search engine friendly. Register here for free: https://www.zoho.com/sites/webinars/

      • Zoho Sites Webinar | Integrations

        Join our FREE live webinar to learn how to integrate both Zoho and third-party products with your Zoho Sites website. Our product expert will demonstrate how to use these integrations to grow, manage, and retain the customers you bring in. Learn how to take your business forward and build stunningly robust and efficient websites. Register here: https://www.zoho.com/sites/webinars/