Create Back to Top button in Hello Elementor Wordpress Theme

 I was developing a website for a client and wanted to implement Back to top button. As hello elementor theme does not have this functionality in built, i was exploring tutorials from google and came across one easy implementation by beaverher.com

Features:

• Only appears when scrolled down
• Disappears when scrolled up to the top of the page

1. Add HTML widget to the footer (you will need elementor pro to edit footer).

2. Paste the HTML & JavaScript Code

Paste the following code to content > HTML Code

 

 

<i class="fas fa-chevron-circle-up" onclick="topFunction()" id="kltop" title="Go to top"></i>
<script>
    //Get the button:
mybutton = document.getElementById("kltop");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>

3. Paste the CSS code to style “back to top” icon

Advanced > Custom CSS > Paste the following CSS code 

#kltop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 10px;
    font-size: 40px;
    color: #a67c00;
}

4. Results & Customize

To Change Icon

Read Step 2, you will see

 

<i class="fas fa-chevron-circle-up" onclick="topFunction()" id="kltop" title="Go to top"></i>

You can find more icons at Fontawesome.com/icons > Search > Click Icon >

Change Icon Style (Color & Size)

Read Step 3, you can change:

• color
• font-size

Done!