In one of our previous articles in the Elementor Pro series, we explained how to add a “back to the top” button by using Elementor Popups. I would like to extend that guide by showing you one more way to control “back to the top” button visibility depending on where your visitors are positioned on the page. This time, we are going to use Elementor’s advanced Motion Effects settings, particularly Scrolling Effects.
Here is our simple but very effective solution from the previous article, Back to top with smooth scroll:
You can access a refresher related to these steps by viewing this resource. We used very simple conditions to be able to display this popup. It will show on the entire site, and it will be triggered when users scroll down to 40% of the page height. You can see the results in the associated video or try it out on your own website. If you’ve already implemented this solution, users can scroll back to the top with or without clicking on your button, and the button stays on the page.
One of our blog readers asked us how he can hide this back to the top if users scroll to back to top without clicking on it. If we want to exclusively utilize the Elementor ecosystem of available features, the answer to this question involves utilizing Motion Effects or more precisely, the Scrolling Effects Transparency settings.
Let me show you how this works. First, let’s start here:
What are the Motion Effects?
We mentioned a couple of Elementor features in the introduction. I find it necessary to give our readers better explanations so that they can understand the purpose and application of motion effects.
Motion Effects are a powerful set of tools from the Elementor Pro edition that allow for the creation of a wide range of animations and effects. You can use motion effects to create all kinds of transitions and animations for your design and page elements. These settings are located in the Elementor Advanced tab and divided into two sets.
The first one is Scrolling Effects, and we’re going to use one of them to control the visibility of our “back to the top” button. This effect is called Transparency.
Scrolling effects are used to control the appearance of animations on the page when users scroll through the page in any direction, up or down. At the moment, these are the effects supported by Elementor:
- Vertical scroll or Parallax,
- Horizontal scroll,
- and Scale.
You can choose to make them visible on Desktop, Tablet or Mobile devices. The last option is very useful for the example we’re utilizing here. It’s called Effects relative to and we can choose between three options:
- Viewport – this is the height of the visible area across a certain screen size. If you set this option, Scrolling effects will apply in the visible viewport area.
- Entire page – with this option enabled, Scrolling effects will be calculated according to the height of the entire page, and not only across the visible part of the screen.
The second set of Motion Effects are called Mouse effects and there are two available options: Mouse track and 3D Tilt.
With Mouse Track, you can make elements on the page move in an opposite direction from, or directly aligned with users’ mouse movements. 3D Tilt will add tilt animations to the element depending on mouse position and movement. To find out more about all these Motion Effects, you can read the official Elementor blog.
What is the Transparency effect?
Transparency is part of the Scrolling Effects toolset. With this effect, you can control the visibility of elements on the page by making them more transparent or more visible depending on users’ mouse scroll actions. This effect can be applied to all Elementor widgets. To activate it, click to edit the element you want to apply this effect to and navigate to the Advanced tab. Under Advanced options, look for Motion Effects and switch them On. Then, click on the pencil icon next to Transparency to access this effect’s settings. You will see something like this:
You can control the following options:
- Direction – there are four options you can choose from to set the direction of your chosen animation:
- Fade In – The element starts as transparent and gradually becomes visible.
- Fade Out – The element starts as visible and gradually becomes transparent.
- Fade Out In – The element starts as visible, then fades out, then becomes visible again.
- Fade In Out – The element starts as transparent, then becomes visible, then transparent again.
- Level – this presents the level of transparency to apply where 1 is totally transparent and 10 fully opaque.
- Viewport – this option is called viewport, and at first, it will associate to viewport height or visible height of the screen. However, this setting will depend on the option you chose in Effect relative to. If you set it to “relative to viewport”, it will be calculated based on the visible height of the screen. If you set it to “relative to the entire page”, the values will be calculated based on the height of the entire page. Values are in percentages and will tell Elementor when to start an animation effect. For example, if you set a top value to 70% and a bottom value to 30%, the effect will be applied between these values of page height.
How to apply the Transparency effect to the “back to the top” button
We are going to edit our previous solution. To open any Elementor Popup for editing, navigate to WordPress Dashboard -> Elementor Templates -> Popups and click on Edit with Elementor on the appropriate popup. This will lead us to the Elementor Editor:
You can leave popup Triggers conditions as they are, or you can change them to On Page Load. Click on the small up arrow next to the green Update button and select Triggers to edit these settings:
We are going to control button visibility from the Transparency settings, but we still need one of these triggers to activate the popup on the page. Activate the one you want and click Save & Close.
We used the Icon widget to create our back to the top button so we will need to click on the Edit pencil icon to access its settings or use the Elementor Navigator to find them. Access Transparency settings under Motion Effects as described earlier. We are going to use these settings:
- Direction – Fade In – we want our back to the top button to be invisible or transparent at the beginning of the page scroll and to become visible later on down the page.
- Level – 10 – we want our back to the top button to be fully opaque at the end of our animation so we choose this setting.
- Viewport – Top 60% and Bottom 0% – with this we will ensure that the button starts to gradually show when users scroll to 60% of page height and become fully visible and opaque when users reach the bottom of the page.
- Effect Relative to – Entire page – this is very important to set as like this percentages in Viewport settings will be calculated based on the entire page height.
With everything set like this, this is how the button will look and behave on the front-end. Pay attention to the bottom right corner in the video where our back to the top button is located.
Our entire team would like to thank our community members for reaching out to us with this question! I hope you will like the solution we’re presented! We’ve completely remained within the Elementor ecosystem to make this solution possible – and please note that you will need the Elementor Pro edition to implement these solutions on your own website. Please share your experience with this process in the comments section below!