Share on facebook
Facebook
Share on pinterest
Pinterest
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on print
Print

How to Add a Scroll-to-Top Button with Elementor

Adding a scroll-to-top button in Elementor is as easy as 1-2-3! Scroll-to-top buttons work best for very long web pages and enhance the user experience for your readers.

From your WordPress dashboard, go to Media and Add New, and select your scroll-to-top graphic from the Media Library or upload from your device.

Go to your selected page, Edit with Elementor, and choose Header. Open up your header in Elementor

Go to the header section, and set a CSS ID. I named the CSS ID “top.” This CSS ID will act as an anchor point for your scroll-to-top button.

Now I’m going to scroll down to the bottom section to the footer.

When the section highlights in orange, click on Edit Footer and add the scroll-to-top graphic.

Add a custom URL #top and click Update.

Now, when we click on this image, the screen scrolls right up to the top.

You can also add motion effects to the scroll-to-top button to make it stick to the bottom of the page.

Click on the button. Go to Edit Image > Advanced > Motion Effects > Sticky > Bottom.

Now when you click the scroll-to-top button, it remains fixed to the bottom of the screen.

One last touch. We’re going to add a motion effect to the scroll-to-top button.

Go back to Advanced > Motion Effects > Entrance Animation > Fade In Up.

Animation Duration is set to Slow. Increase the Animation Delay to 2500 (ms).

Click Update and preview. As you scroll down from the top of the page, the button slowly emerges from the bottom of the screen.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

unleash your inner diva!

Become a Diva VIP Member, and get a 20% discount off your next purchase!