Articles on: Custom extensions

Scroll to top button (back-to-top)

To add a button, you need to make the following changes in the "General settings":

1. In the "<head> custom HTML code" section, insert the following code:



<script>
    function handleScroll() {
      var scrollToTopBtn = document.getElementById("scrollToTopBtn");
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        scrollToTopBtn.style.display = "block";
      } else {
        scrollToTopBtn.style.display = "none";
      }
    }
    function scrollToTop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
    window.onscroll = function() {
      handleScroll();
    };
</script>




2. In the "</body> custom HTML code" section, add the following code:



<button id="scrollToTopBtn" onclick="scrollToTop()">🔺</button>
<style>
    #scrollToTopBtn {
      display: none;
      z-index: 999;
      position: fixed;
      bottom: 20px;
      right: 48.5%;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 50px;
      padding: 17px 15px;
      cursor: pointer;
    }
</style>




3. Save the changes and open your page. The button will now appear as you scroll.


Updated on: 22/08/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!