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 to 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 must 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 appear when scrolling down a few heights. Alright, let’s do that!
- JavaScript
You need to add some JavaScript snippets to make the action happen. But don’t worry; we already have written the JavaScript snippet for you; copy and paste.
Please create a new section by clicking 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, return 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 to 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:
- By setting Z-Index
- By creating a popup
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 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.
8 thoughts on “How to Reveal an Element on Scroll Down and Hide on Scroll Up with Elementor”
Hello,
I’ve tried to do that for a bottom sticky section, but it’s only hiding my section and does nothing else.
Is it normal?
Thanks in advance!
Hello Eduard!
Thank you for visiting our site.
Regarding your question, we’d like to inform you that this tutorial also works for your case (a sticky bottom section). Please ensure you’ve added a JavaScript snippet into the HTML widget and a CSS snippet into the Section (Custom CSS field).
Thank you
Hi,
Thanks for sharing!
I tried the above code to show/hide the button. It works well.
But can we add the slideUp effect when we show and slideDown effect when it hide?
Thank You
Hi Akbar, great tutorial, thanks!
I’ve used it to create a ‘sub header’ with an ‘add to cart’ button that appears after a user has scroll down the normal ‘add to cart’ button.
However, I can’t figure out how to completely hide this ‘sub-banner’ when the normal ‘add to cart’ button is visible.
The ‘sub header’ isn’t visible but the column height is. Is there a work around that?
Thanks,
Kris
Hi Kris, thank you for visiting our site!
First, we would like to make sure what your issue is.
Is it true if your sub-header is already not visible in state mode and will be visible when you scroll down? But do you have a problem with the column height still being there when state mode (before scrolling down)?
We’ve implemented the tutorial using your scenario, and everything works well; we don’t find your issue (column height)
Please ensure the HTML tag is set to header on your sub-heading section settings.
Thank you
You’re welcome! To make it hopefully a bit easier I’ve recorded a very short video illustrating the problem. You can see it on the link below.
https://drive.google.com/file/d/1iJziMnJH3tNnEtnY9uWgf4z_UbWSYp4V/view?usp=sharing
Done the steps as described in your tutorial. Only changed the 400px to 600px.
I think the HTML is set up properly but I’m not entirely sure (not the biggest expert haha)
Any idea how to resolve this?
Many thanks,
Hi,
in general, everything works fine, but as soon as I include the script, the console (in Chrome) shows two errors:
1) Uncaught TypeError: o.widget is not a function at mouse.min.js
2) Uncaught TypeError: Cannot read properties of undefined (reading ‘mouse’) at slider.min.js
Any idea on how to fix this?
Hi t,
Regarding your problem, it might be some type of conflict with the jquery library. Try the following fix here.
Hope that fix your problem.