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

🖼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 like 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.

FREE DOWNLOADS!
—————————————————
🔽 Design it Like…Fenty Beauty Home Page Elementor Template! https://digitaldivadesign.com/design-like-fenty-beauty-elementor-template

🎨5 FREE InDesign Mood Board Templates! Just click the link to download!
https://digitaldivadesign.com/free-mood-boards/

🖼5 FREE InDesign Brand Board Templates! Just click the link to download!
https://digitaldivadesign.com/free-brand-boards/

💎Become a Diva VIP Member and get EXCLUSIVE offers, discounts, and sneak peeks into new products! Sign up now and get instant 20% savings off of your next order! https://digitaldivadesign.com/vip-membership/

RECOMMENDATIONS
—————————————————
👉🏽 Elementor Pro! https://trk.elementor.com/digitaldivadesign

SHOPPE!
—————————————————
🛒 Digital Diva Design Shoppe: https://digitaldivadesign.com/shop
🛒 Etsy Shoppe: https://www.etsy.com/shop/DigitalDivaDesignn
🛒 Creative Market Shoppe: https://creativemarket.com/digitaldivadesign

FOLLOW ME!
—————————————————
📸 Instagram @digitaldivadesign
📌 Pinterest: https://www.pinterest.com/digitaldivadesign/