How to Reveal an Element on Scroll Down and Hide on Scroll Up with Elementor

There are many advantages when you’ve chosen Elementor as your page builder. Elementor gives plenty of customization options to most minor things to make your WordPress site attractive. One of the advantages is revealing and hiding the element by scrolling down and scrolling up.

There are some elements that you can reveal or hide by scrolling, such as:

Back to Top Button
Floating Call to Action Button
etc.,

This article will show you how to reveal the element on scroll down and hide it on scroll up with the help of Elementor.

How to Reveal the Element on Scroll Down and Hide on Scroll Up with Elementor

Before continuing the tutorial, we would like to ensure that you already have Elementor Pro because we’ll need two features only available on Elementor Pro: Theme Builder and Custom CSS.

Alright, let’s get started!

How to Reveal the Back to Top Button by Scrolling Down and Hide by Scrolling Up

Go to your Elementor editor; you can edit your existing content (Page, Post, and Template) or create a new one.

Step 1: Create a Back-to-Top Button

Enter the Elementor editor, select the Button widget from the widget panel, and drag and drop it into the canvas area. You can put that widget anywhere on your page because we will adjust the position. In this example, we put the Button widget on the bottom of the page.

On the settings panel, we applied some changes as below:

Content tab:

Text: Remove the text
Alignment: Right
Icon: Select the Arrow Up icon from the Icon Library

Style tab:

Fixed Position:
- Height: 1
- Width: 1
Background Color: #FFFFFF30

Advanced tab:

Position: Fixed
Horizontal Orientation: Right
- Offset: 50 PX
Vertical Orientation: Bottom
- Offset: 50 PX

Next, we’re going to make the button clickable. Go back to the Content tab on the settings panel and start to link the button to the top section of the page by filling in the Link field. We need to go to the top section and click the Edit Section button. On the Advanced tab, go to the CSS ID, add any id name, and copy it. Once you’ve copied the CSS ID name, go back to the Edit Button -> Content tab and paste the CSS ID name into the Link field.

So now, no matter where you are on this page, it jumps you to the top if you click the button.

Step 2: Hiding and Revealing the Back to Top Button

As you can see from the GIF above, the button function is working well. But, when you’re at the top section of the page, you can still see the Back to Top button. So, it doesn’t look good. So, it would help if you made the button disappear when you’re on the top section and made the button appears when you’re scrolling down a few heights. Alright, let’s do that!

JavaScript

You need to add some JavaScript snippets to make the action happen. But, no need to worry because we already have written the JavaScript snippet for you; copy and paste.

Please create a new section by clicking on the plus icon (+), selecting the HTML widget from the widget panel then dragging and dropping it into the canvas area. We add the HTML widget above at the top section in this example.

Next, add the following JavaScript snippet into the HTML Code field by copying and pasting the JavaScript snippet below:

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    var offset = 400
    $(window).on('load scroll', function(){
        
        if( $(window).scrollTop() > offset ){
            $('body').addClass('show')
        }else{
            $('body').removeClass('show')
        }
    })
    </script>

We will give you a short description of the JavaScript snippet above. When you scroll 400 pixels, the body on a class name will be added and shown, and when you go to the top of your page, the show class name will be removed.

Custom CSS

Once you finish adding the JavaScript snippet into the HTML field, go back to the Button widget settings. On the Advanced tab, open the Custom CSS block and add the following CSS snippet:

selector{
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
body.show selector{
    opacity: 1;
}

Now the Back to Top button is hiding and revealing perfectly. Don’t forget to click the UPDATE or PUBLISH button to save the work that you’ve just made.

How to Reveal the Floating Call to Action Button by Scrolling Down and Hide by Scrolling Up

Go to your Elementor editor; you can edit your existing content (Page, Post, and Template) or create a new one.

Step 1: Create a Floating Call to Action Button

In Elementor, there are two methods for creating a floating call to action button, they are:

For this example, we will use the first method by using Z-Index. We have already posted the article “How to Create Floating Button in Elementor).” You can click the link for more details. Let’s get started!

Go to your Elementor editor; you can edit your existing content (pages, posts, template) or create a new one. In this example, we will edit our current page. First, create a new section with a single column. Select the Button widget and drag it into the canvas area from the widget panel. Next, edit the Text button and the Link. In this tutorial, we will use the button as a trigger to navigate the visitors to the Taylor Swift concert tickets sale website.

Step 2: Hiding and Revealing the Floating Call to Action Button

As you can see from the GIF above, you can still see the floating call to action button at the top section of the page. To make the floating call to action button disappear when you’re on the top section and complete, the floating button appears by scrolling down a few heights. You can repeat your ways when hiding and revealing the Back to Top button above.

Note: When you’re editing to hide and reveal the Back to Top button and Floating Call to Action button on the same page, you only need to paste the CSS snippet to the Custom CSS field.

Once you’ve done your page, don’t forget to click the UPDATE or PUBLISH button to save the work you’ve just made.

The Bottom Line

This article shows you how to reveal the element by scrolling down and hiding by scrolling up in Elementor. Feel free to play around with the Button widget, experiment with all the customization, and enjoy making your WordPress site more engaging.