The Scroll To Top extension allows you to add a floating button that smoothly scrolls the user back to the top of the page. It’s a great UX feature, especially for long pages.
🔓 Step 1: Enable Scroll To Top Extension
Go to Topper Pack → Extensions
Find the Scroll To Top extension
Toggle the switch ON
Click Save Settings
🛠️ Step 2: Customize Scroll To Top in Elementor
Once enabled, the feature becomes available in Elementor Site Settings.
How to Access:
Open any page with Elementor
Click the Site Settings (gear icon) in the bottom-left corner
Go to TPP Scroll to Top
⚙️ Scroll To Top Settings & Controls
You can fully customize the appearance and behavior of the scroll button:
Setting
Description
✅ Enable Scroll To Top
Toggle to show or hide the button
📱 Responsive Visibility
Control visibility on desktop, tablet, or mobile
📍 Position
Set to Bottom Right, Bottom Left, etc.
📐 Bottom / Right
Control distance from page edges (in px)
📏 Width & Height
Set size of the scroll button
🔢 Z Index
Set layering to avoid being hidden by other elements
🎨 Opacity
Control transparency
🖼️ Media Type
Use icon or image for the scroll button
🔲 Size & Color
Set icon size and primary color
🖌️ Background & Border
Customize background color, border type, radius, and shadow
💡 Use Cases:
Improve navigation on long landing pages
Enhance mobile usability
Create a modern user experience with floating UI elements
Scroll To Top
The Scroll To Top extension allows you to add a floating button that smoothly scrolls the user back to the top of the page. It’s a great UX feature, especially for long pages.
🔓 Step 1: Enable Scroll To Top Extension
🛠️ Step 2: Customize Scroll To Top in Elementor
Once enabled, the feature becomes available in Elementor Site Settings.
How to Access:
⚙️ Scroll To Top Settings & Controls
You can fully customize the appearance and behavior of the scroll button:
💡 Use Cases: