🛠️ Step-by-Step Guide
Assign an Anchor ID to the Top
Select the top-most section of your page and go to its Advanced settings.
In the CSS ID field, type a unique identifier like
top
(without the#
symbol). Elementor
Add the Button
Drag Elementor’s Button widget into the location where you want the “back to top” link to appear (commonly in a footer or sticky footer).
Set the button’s text to something like “Top.”
In the Link field, type
#top
(include the#
to target the ID you set earlier). Elementor
Optional: Make the Button Sticky
If you’re using Elementor Pro, apply the Sticky Scrolling effect to the button via the Advanced tab.
Choose to stick it to the bottom, side, or another position to keep it visible as users scroll. Elementor
âś… Best Practices
Anchor ID choice: Use a simple, unique name (like
top
orhome
) to avoid conflicts.Visibility: Sticky placement helps users access it easily no matter where they are on the page.
Style Consistency: Match the button’s design (colors, size, typography) to your site’s theme for a polished look.
Testing: Check that clicking it scrolls smoothly to the top, and ensure the button performs well on all devices.
With just a few steps—assigning an ID, placing a button linked to it, and optionally making it sticky—you can enhance navigation and boost user experience with a Back-to-Top feature.