Easy Elementor Back To Top Arrow Button

Easy Elementor Back To Top Arrow Button

Element.How also offers premium tutorials! Check them here:

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> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Back To Top Arrow Button tutorial 
 * Found at this URL https://element.how/elementor-back-to-top-arrow-button/ 
 */ 
</script>

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!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

Checkout the Elementor Addon Finder directly

15 Responses

  1. Thanks a lot!
    To make it even better I added fadeIn and fadeOut animations:
    $(window).scroll(function(){
    if ($(this).scrollTop() > 500) {
    $('#backupthepage').fadeIn();
    $('#backupthepage').addClass('showtoTp')
    } else {
    $('#backupthepage').fadeOut();
    $('#backupthepage').removeClass('showtoTop')
    }
    });
    Hope it helps 🙂

    1. Thanks for sharing!

      And in fact, you could just have this code :

      $(window).scroll(function(){
      if ($(this).scrollTop() > 500) {
      $('#backupthepage').fadeIn();
      } else {
      $('#backupthepage').fadeOut();
      }
      });

      And it would work fine. (No need to add or remove any class, as the jQuery is changing the display property directly with those fadeOut() and fadeIn() methods.) You could also then delete that CSS :

      #backupthepage.showbackupthepage{
      display: block;
      }

      1. This is so usefull.

        Can you share the complete code so the button does the following?

        On scroll down after Y amount on space
        Slides in and fades in

        On scroll Up near top
        Slides out and fades out

  2. Hi there,
    How to manage the responsive properly?
    Hide mobile? Via Jquery? CSS?

    The following is working properly but I just wonder how you would do it?

    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    $(window).scroll(function(){
    if ($(this).scrollTop() > 600) {
    $('#backupthepage').fadeIn();
    } else {
    $('#backupthepage').fadeOut();
    }
    });
    $('#backupthepage').click(function(){
    $('html, body').animate({ scrollTop: 0 }, 'slow');
    return false;
    });
    }); });

    @media (max-width: 767px) {
    #backupthepage{
    display: none !important;
    }
    }

    Thanks

    1. Hey Jivaneo!

      What you have is alright. Slightly better practice would be to run the JS only if the viewport is above 767.

      if (window.innerWidth > 767) {

      //all the js here

      }

    1. Greetings,

      Sorry this isn't related to the current tutorial... And I don't have any tutorial about this topic yet. Try Google maybe!

      Cheers!

      1. ok tanks
        First, I googled and because I did not get the result, I asked here. Thank you anyway.

  3. Hi,
    Useful code as always.
    Is there a way to show the icon after scrolling a certain percent of the page instead of a fixed number of pixels?
    Thanks

Leave a Reply