Team

Solutions

Work

Blog

Engage

Team

Solutions

Work

Blog

Engage

Elementor back to top button with Scrolling Effects

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Would you like to control the visibility of back to top button on your website depending on your visitors scroll behaviour? Meet Elementor Pro Scrolling Effects, part of Elementor Motion Effects set of tools and follow our guide on how to apply this on your website.

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,
  • Transparency,
  • Blur,
  • Rotate,
  • 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:

  1. Default
  2. 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.
  3. 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:

  1. Direction – there are four options you can choose from to set the direction of your chosen animation:
    1. Fade In – The element starts as transparent and gradually becomes visible.
    2. Fade Out – The element starts as visible and gradually becomes transparent.
    3. Fade Out In – The element starts as visible, then fades out, then becomes visible again.
    4. Fade In Out – The element starts as transparent, then becomes visible, then transparent again.
  2. Level – this presents the level of transparency to apply where 1 is totally transparent and 10 fully opaque.
  3. 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:

  1. DirectionFade 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.
  2. Level10 – we want our back to the top button to be fully opaque at the end of our animation so we choose this setting.
  3. ViewportTop 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.
  4. Effect Relative toEntire 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.

The page load button is invisible. As the user scrolls through the page, the button becomes partially visible and fully visible when the user reaches the footer. In the opposite direction, from bottom to the top, the button will be fully visible and become transparent as the user reaches the top of the page. Clicking on the button will lead the user to the top of the page and the button will become invisible. Quite a useful and simple solution, right?

Conclusion

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!

Do you want our team to design and develop a stunning website for you? Send us the details and we'll start discussing a strategy for your project!
Nemanja Tomanovic

Nemanja Tomanovic

Nemanja is a certified PHP Developer specialized for WordPress development. His main skills are HTML, CSS, PHP, and JavaScript. His IT career starts as a Marketing Analyst working on frontend, maintenance, SEO and different marketing tasks. At Roshem his main area of work is WordPress development.
Nemanja Tomanovic

Nemanja Tomanovic

Nemanja is a certified PHP Developer specialized for WordPress development. His main skills are HTML, CSS, PHP, and JavaScript. His IT career starts as a Marketing Analyst working on frontend, maintenance, SEO and different marketing tasks. At Roshem his main area of work is WordPress development.

Leave a Reply

Comments

  1. Avatar

    Great post. I used to be checking constantly
    this blog and I’m inspired! Very useful info particularly
    the closing phase 🙂 I handle such information a lot.
    I was seeking this particular info for a long time. Thanks and best of luck.

  2. Avatar

    Hi Nemanja. This is a great solution and I implemented it on this website: https://new.huroniaairport.com/
    I have a glitch where on click the page scrolls back up a certain distance then scrolls down a tiny bit and then scrolls up all the way to the top. I found that by removing this css: html {scroll-behavior: smooth !important;} it behaves properly – but that totally doesn’t make sense. The other issue I have is that the back to top doesn’t work on mobile. Have you come across this? Thank you in advance.

    1. Nemanja Tomanovic Author

      Hi Veronique. I am glad that my article was helpful to you. I visited your site via computer and mobile phone but I did not notice any problems in the functioning of the button. It appears/disappears neatly on both devices and has a nice transition to the top of the screen. Did you manage to set it to work properly?

  3. Avatar

    Just want to say thank you because that’s exactly what I needed. I had already figured out how to build a backtotop icon using Elementor popup, but the problem was that with it I can trigger when the popup need to appear but there’s no way to trigger when the button has to DISAPPEAR. Once loaded it stays on screen even if clicked. Using the transparency method you have explained is a nice and simple workaround, although I would be happier if Elementor itself could add more triggers to actually remove the icon when not needed instead of hiding it.

    1. Nemanja Tomanovic Author

      Thank you for the comment and I’m glad I was able to help you. I totally agree with you that it would be very convenient to have additional Triggers that could control this behavior.

    1. Nemanja Tomanovic Author

      Thank you for such a positive comment. I really like the design of your blog. Clean and simple. Very nice!

Leave a Comment

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email