Easy Elementor Back To Top Arrow Button

Table of Contents

The back to top arrow button is a simple but very effective tool which helps in the navigation of a website . It reduces the burden of scrolling up or laboriously dragging the scroll bar all the way back to the top.

Now let's see how to easily implement Back To Top Arrow Button feature with Elementor in a matter of minutes.

Insert a button element in the page or the footer template.

Adding the back top top button to the footer template will ensure that the button will be added throughout the website wherever the footer template is used.

Easy Elementor Back To Top Arrow Button 1

Add text or styling to your button.

Easy Elementor Back To Top Arrow Button 2

1. You can put any desired name for the button's label in "Text" attribute almost at the top of the properties section. We are going to name it as "Back to Top".

2. Now, set the "Link" attribute's value to "css-goToTop" or any desired name.

Set the top section a scrolling anchor.

Go the topmost element of the page and click on the (...) icon to open the "Edit Section" of that element.

Easy Elementor Back To Top Arrow Button 3

Easy Elementor Back To Top Arrow Button 4

1. Go to the "Advanced" tab in the Edit Section menu.

2. Set the CSS ID to "css-goToTop" or any other name that was set to link field of the "Back to Top" button on the second step.

Make the Elementor button stick to the bottom right of the page.

1.   Go to the "Edit Button" icon which pops up on hovering over the button.

Easy Elementor Back To Top Arrow Button 5

2.  Next navigate to the "Advanced" Tab and open up the "Positioning" drop down.

Easy Elementor Back To Top Arrow Button 6

3.  Change the "Position" attribute to "Fixed" and the "Width" to "Inline (auto)".

Easy Elementor Back To Top Arrow Button 7

4.  Finally, set the "Horizontal Orientation" to "Left" and the "Vertical Orientation" to "Bottom".

Easy Elementor Back To Top Arrow Button 8Easy Elementor Back To Top Arrow Button 9

You can go to the bottom of the page and click on the "Back to Top" button and the page automatically scrolls back up with ease. Now that's how you create a Back To Top Button by Elementor.

Elementor back to top arrow: Up arrow icon to move back up the page

The text on the back to top button can be replaced with an arrow icon. Also, the button can be made visible only after the user scrolls down significantly.

Adding the up arrow.

Easy Elementor Back To Top Arrow Button 10

  1. Go to the "Content" tab and click on the Icon Library.

Easy Elementor Back To Top Arrow Button 11

  1. Type on the icon search bar "UP" and the suggestions for the "UP" icon will show up below.
  2. Click on the desired "UP" icon.
  3. Finally click on the Insert icon to insert the icon in the button.

Easy Elementor Back To Top Arrow Button 12

Lastly , go to the advanced tab and change the "CSS-ID" to "btt" or any other desired name. Note that this name will be used later on, in the Javascript code snippet.

Also, for visual aesthetic purposes, copy the below code in the "Custom CSS" attribute of the button. The custom CSS is present under the Advanced tab of the edit section pane of the button.

Easy Elementor Back To Top Arrow Button 13

#btt .elementor-align-icon-left {
margin-right: 0;

}

Now , to complete the next part we need a bit of knowledge with Javascript , which makes the visibility of toggle with the scroll function. The required JS code is given in this article below.

How to show the Elementor button after scrolling down only.

Easy Elementor Back To Top Arrow Button 14

Drag and drop this element to the webpage . After this open the edit section tab of the HTML element.

Easy Elementor Back To Top Arrow Button 15

Easy Elementor Back To Top Arrow Button 16

  1. Go to the content tab in the Edit HTML pane.
  2. Paste the Javascript code in the HTML Code textbox.
<script>

var myb = document.getElementById("btt");

window.onscroll = function() {scrollFunction()};

function scrollFunction() {

  if (document.body.scrollTop > 1100 || document.documentElement.scrollTop > 1100) {
    myb.style.display = "block";
  } else {
    myb.style.display = "none";
  }
}
</script>

Conclusion

Alright! Now the back to top arrow button has been successfully implemented!

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments