I have created this bottom to top Button for Q2A (Free)

Fri, 28 Apr 2023 16:25:02 +0000

This code will show a back to top floatingButton, when user click on the button user will go back to top of the page.

Paste this Javascript code in your theme js file:

// back to top scrool

document.addEventListener("DOMContentLoaded", function() {

    // show the button when the user scrolls down 20px from the top of the document

    window.onscroll = function() {

      showBackToTopBtn();

    };


    function showBackToTopBtn() {

      const btn = document.getElementById("back-to-top-btn");

      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {

        btn.style.display = "block";

      } else {

        btn.style.display = "none";

      }

    }


    // scroll to the top of the document when the button is clicked

    document.getElementById("back-to-top-btn").addEventListener("click", function() {

      const scrollToTop = window.scrollY;

      window.scrollTo({

        top: 0,

        behavior: "smooth"

      });

    });

  });

Paste the html code in your theme's qa-theme.php file at the footer section: (Find the public function footer() by pressing cltr+f inside the file )

<div id="back-to-top-btn">Back to Top</div>

Here is the css code:

#back-to-top-btn {

  display: none; /* hide the button by default */

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 9999;

  font-size: 16px;

  border: none;

  outline: none;

  background-color: #555;

  color: white;

  cursor: pointer;

  padding: 10px;

  border-radius: 4px;

}


#back-to-top-btn:hover {

  background-color: #333;

}

////////////////////////////////////////////////////////////////////

I have pasted this html code in my qa-theme.php file, in footer section like this:

 public function footer()

    {   $this->output('<div class="backtoptop">');

        $this->output('<div id="back-to-top-btn">Back to Top</div>');

        $this->output('</div>');

        $this->output('<div class="qam-footer-box">');

*************Some codes here****

        $this->output('</div> <!-- END qam-footer-box -->');

    }

/////////////////////////////////////////////////////////////

You can also use arrow icon instead of Text in button, Here is the code:

<div id="back-to-top-btn"><svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path d="m2.014 11.998c0 5.517 4.48 9.997 9.998 9.997s9.997-4.48 9.997-9.997c0-5.518-4.479-9.998-9.997-9.998s-9.998 4.48-9.998 9.998zm6.211-1.524s1.505-1.501 3.259-3.254c.146-.147.338-.22.53-.22s.384.073.53.22c1.754 1.752 3.258 3.254 3.258 3.254.145.145.217.335.217.526 0 .192-.074.384-.221.53-.292.293-.766.295-1.057.004l-1.977-1.977v6.693c0 .414-.336.75-.75.75s-.75-.336-.75-.75v-6.693l-1.979 1.978c-.289.289-.761.287-1.054-.006-.147-.147-.221-.339-.222-.53 0-.191.071-.38.216-.525z" fill-rule="nonzero"/></svg></div>

Her is the css: 

div#back-to-top-btn svg {

  width: 25px;

  height: 25px;

  fill: #fff;

  margin: auto;

  justify-content: center;

  display: flex;

}

Question2Answer Q&A - Recent questions tagged backtotop

I have created this bottom to top Button for Q2A (Free)