Scroll To Top Elementor V2

Elementor Sticky Scroll To Top / Elementor Sticky Back to Top button V2 Basic

Don’t want to add another plugin to your wordpress site or additional javascript requests?  Add this scroll to top button with Elementor using some simple CSS and built in Elementor functions.

Elementor Pro 2.1+

You must have Elementor Pro updated to at least 2.1 to use this tutorial to build your scroll to top button.

1.

Step 1: Create your section and widget for the button

Go to your Header template within Elementor and add a new section below your navigation.

Set the section to full width instead of boxed so your button will be in the corner of the screen.

Set the Scrolling Effects to Sticky -> Top (Advanced Tab -> Scroll Effects).

Set the z-index of the section to be above all other content, such as “5” or “10”.

Inside this section add a HTML widget.

Add this code to the HTML widget:

<a href="#" onclick='window.scrollTo({top: 0, behavior: "smooth"}); return false;' > 
<i class="fa fa-chevron-up"></i>
</a>

2.

Step 2: Style the button & Move it to the correct Horizontal Location

Now let’s add some style to the button and move it to the right spot.
Edit the column of your section, selecting the Style top tab.

Set the Link color and Link Hover color to the color of the arrow you want, I chose white and a blue on hover.

Set the text alignment to be where you want your button, I chose to the right.

Select the HTML widget, go to the Advanced tab -> Custom CSS and add this code:

selector a{
background-color: #000;
padding:0.4em 0.5em 0.5em;
border-radius: 50%
}

What it looks like so far (before scroll and after scroll)

3.

Step 3: Hiding the button until we scroll & vertically positioning it

Select your section and go to Advanced -> Custom CSS.

Add in this code:

NOTE:  Change the "top" to the value you want. Some examples are commented in the code. For the tutorial I used 25vh.

/* Ignite Web Design Elementor Sticky Scroll to Top button (basic) version - https://igniteweb.design */

selector {
    position: absolute;
    /* set top to how far down to scroll before the button appears
    top: 25vh = 1/4 a pageview scroll
    top: 50vh = 1/2 a pageview scroll
    top: 100vh = 1 full pageview scroll
    */
    top: 25vh;
    opacity: 0;
}

selector.elementor-sticky--effects {
   margin-top: 95vh !important;
   width: 100% !important;
   opacity: 1 ;
   transition: opacity 0.5s ease;
}
@media only screen and (max-width: 411px) {
  selector.elementor-sticky--effects {
   margin-top: 94vh !important;
   
}
}

The Result

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.

Want to download and implement without the work?

Download the Elementor Template or Pack below!

Elementor Sticky Scroll to Top V2 Pack Includes: Circle, chevron Square, chevron Double circle Circle, long arrow Square, long arrow Circle, short arrow Square, short arrow With instructions on importing…

$3.00

Elementor Sticky Scroll to Top V2 Basic Black circle with white chevron arrow bottom right corner as seen. Requires Elementor Pro Version 2.1 or newer.

$1.00

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.