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?

Thank you!