Elementor – Sticky “Scroll to Top” button without additional plugins or javascript scripts

Ever wonder how to make a scroll to top button without adding a new plugin to your ever-extending list of plugins?  You can do it with elementor using just some CSS and a bit of code!  No extra plugins or javascript files needed beyond what comes with Elementor.

This tutorial is outdated, if using an updated version of Elementor, please see the new version of the tutorial.

 

Using Elementor Pro 2.1 or newer?

Please view the new version of our tutorial for the Elementor Pro 2.1+ release.

1.

Create Your Button

  1. Starting off from our previously created Sticky Header (with effects using purely CSS) we’re going to jump back into our Header template, we can use Elementor’s sticky section for more than just your navigation! 
  2. Create a section below your header and add a HTML widget.
    The default Elementor button doesn’t allow for a “OnClick” event so we need to create our own.  Alternatively there are additional Elementor addon packs that DO allow for OnClick events, such as Premium Addons for Elementor
    For this example we’re trying to not add any additional plugins so let’s do it without!
  3. Add the following code to your HTML widget:
    (I’m using  a up arrow icon using font-awesome4 (built in with Elementor).  You can use text, different icons, or whatever you want!)
    <a href="#" onclick='window.scrollTo({top: 0, behavior: "smooth"}); return false;' > 

    <i class="fa fa-arrow-up"></i>

    </a>
  4.  Move the button widget into a separate column in your section and size them how you want, I’m doing 95% on my left column and 5% on the column my widget is in so it’s all the way to the right of the page.  I’m also going to set my column’s typography to be centered.  You could also just set your typography to be right-aligned for the section with a single column and use some right-padding or right-margin on the html widget.  
  5. Change your section’s Z-index to higher than 1, to ensure your button floats above other elements.
    Set the section to Sticky:
    On the button’s section, go to Advanced -> Scrolling Effect -> Sticky YES. 

Here’s what we have so far:

2.

Set Up Your Section

Right now your button is functioning, it will stick and follow the page down and scroll nice and smooth-like to the top… however it’s hideous and showing up always instead of only after we start scrolling on the page.  Let’s fix that.

  1. We don’t want the button being indented from the side of the page on bigger screens, it would sit in the middle over your content… gross! Make your section Full Width instead of boxed.
  2. We also don’t want the button sitting at the top of the screen, we want it at the bottom.  Since we’re sticking to the top of the screen using Elementor’s sticky javascript we can push the button to the bottom by using a margin.  Pixels and even % here could be troublesome.  Unfortunately those are the only two options built in to Elementor right now for margin so we need to do it via CSS to use viewheight instead.

    Grab your section, go to the advanced tab -> Custom CSS.  Add in:


    selector {
    margin-top:100vh;
    }

    Now our button will sit on the bottom right of the screen with a full width… but we don’t want to always see it, especially that margin.  

Here’s what it looks like so far.  Functional, but ugly.

Let’s fix that.

Time for some CSS!

Go back to your section’s advanced-> Custom CSS.  
Add in:

display: none; 

to your selector {} and add 

selector.elementor-sticky--active {

display: block;

width: 100% !important;

}

below it.
Your complete CSS should now be:

selector {

margin-top:100vh;

display: none;

}

selector.elementor-sticky--active {

display: block;

width: 100% !important;

}

 

What We Have Now

3.

Styling The Button

Much better.  The button itself is ugly but it’s core functionality is now there.  Let’s spiff it up just a little bit.  The possibilities are endless for what you make the button look like!

  1. Select the HTML widget where we made the button and go to Advanced -> Custom CSS.  Add in:
    selector a{

    background-color: #000;

    padding:0.5em 0.6em;

    border-radius: 50%

    }

  2. Now we have a circle button with some spacing around the arrow and a black background.  We can use the column’s built in styling to control the arrow color vs. hard coding it with CSS just to be a little quicker. 
    Select the column where the button lives and go to the Style tab->Typography. 
    Set the link color and link hover color to what you want your arrow to be.
  3. Bonus, let’s add a little effect that makes the button “pop” up when we scroll down and hide nicely.  Go back to your Section’s advanced ->custom css and in the Selector {} area add in:
    transition: all 0.5s ease;

    Now this isn’t a tutorial on making the coolest looking button, there’s millions of possibilities and ways to make them look so I won’t waste any time going over those ;).  Again you can also use an elementor addon plugin that contains a button widget with the OnClick event and customize the button’s look that way.

What We Have Now

Our tutorial is offered free as a guide for use on your website and may be used commercially for client use as well.  No attribution is necessary to use our code in production websites, however you may not re-post or redistribute our code in any way without permission.

Share Me!

Share on facebook
Share on google
Share on twitter
Share on email
We use cookies to ensure that we give you the best experience on our website including downloads and analytics. By continuing to use our page you are accepting use of cookies listed in our privacy policy.