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.

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

Adding the Elementor back to top arrow 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

Step 2. Add the up icon to your Elementor back to top button

You can also adjust the styling as you wish. You will probably want to set the size to Extra Small, and adjust the icon color and button color to your liking. Choose transparent, if you just want an icon to show up. You can choose the icon you want.

Easy Elementor Back To Top Arrow Button 2

Easy Elementor Back To Top Arrow Button 3

Step 3. Give your Elementor button the  CSS ID 'backupthepage'

Easy Elementor Back To Top Arrow Button 4

Step 4. 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.  Then 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". Adjust the offset values slightly, to get it right where you want.

Easy Elementor Back To Top Arrow Button 8

Also adjust the positioning for tablets and mobile!

Finally, add this code to an HTML element anywhere in your footer template or in your page.

Easy Elementor Back To Top Arrow Button 9

You can adjust the '1310' value you will find toward the beginning of the code to any value you want. It represents the point in the page where the back to top arrow will become visible.

<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 1310) {
$('#backupthepage').addClass('showbackupthepage')
} else {
$('#backupthepage').removeClass('showbackupthepage')
}
});
$('#backupthepage').click(function(){
$("html, body").animate({ scrollTop: 0 }, 'slow');
return false;
});
}); });
</script>

<style>
#backupthepage{
cursor: pointer;
display: none;
z-index: 98;
}
#backupthepage.showbackupthepage{
display: block;
}

#backupthepage .elementor-align-icon-left {
margin-right: 0;
}
</style>

That's it! Enjoy your new Elementor Back to Top Arrow Button!

Alright! Now the back to top arrow button has been successfully implemented! Let me know if this works fine for you!

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments