Scroll To Top

Estimated reading: 2 minutes 36 views

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

  1. Go to Topper Pack → Extensions
  2. Find the Scroll To Top extension
  3. Toggle the switch ON
  4. Click Save Settings
enable scroll to top

🛠️ Step 2: Customize Scroll To Top in Elementor

Once enabled, the feature becomes available in Elementor Site Settings.

How to Access:

  1. Open any page with Elementor
  2. Click the Site Settings (gear icon) in the bottom-left corner
  3. Go to topppa Scroll to Top
scroll to top open

⚙️ Scroll To Top Settings & Controls

You can fully customize the appearance and behavior of the scroll button:

SettingDescription
✅ Enable Scroll To TopToggle to show or hide the button
📱 Responsive VisibilityControl visibility on desktop, tablet, or mobile
📍 PositionSet to Bottom Right, Bottom Left, etc.
📐 Bottom / RightControl distance from page edges (in px)
📏 Width & HeightSet size of the scroll button
🔢 Z IndexSet layering to avoid being hidden by other elements
🎨 OpacityControl transparency
🖼️ Media TypeUse icon or image for the scroll button
🔲 Size & ColorSet icon size and primary color
🖌️ Background & BorderCustomize background color, border type, radius, and shadow
scroll to top settins

💡 Use Cases:

  • Improve navigation on long landing pages
  • Enhance mobile usability
  • Create a modern user experience with floating UI elements

Leave A Comment

All fields marked with an asterisk (*) are required

Share this Doc

Scroll To Top

Or copy link

CONTENTS

Powered By EazyDocs

Elevate your WordPress experience with Topper Pack — your all-in-one toolkit for stunning designs and smooth performance.

Facebook-f Twitter Linkedin-in

Terms

Top Widgets

Top Extension

© 2025 Topper Pack. All Rights Reserved.